In angular how to open new tab from component

Question

I have simple angular application with two component. I want to open one component in new tab.

Here is my application.

In my AppComponent.html file there is a button. when I click on this button I want to open MapComponent.html file in another tab. in this case I don't want to move AppComponent button into MapComponent.html file. openMapInNewTab(address: string) I want to pass address to the MapComponent.html file and want to show google map according to the given address. At the top of the google map I want to add user guide to how to get lat lng from map. that's why I want to open map in new component before I want to keep my height and width 200px. how can I achive this. I have tried add route and many ways. but i couldn't able to do it.

AppComponent.ts file

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'routeApp';

  constructor(private router: Router) {}

  openMapInNewTab(address: string) {    
  }
}

AppComponent.html file

<button (click)="openMapInNewTab()">Open Map</button>

MapComponent.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  ngOnInit(): void {
    
  }   
}

MapComponent.html file

<p>map works!</p>

AppRoutingModule file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map/map.component';

const routes: Routes = [
  {path: 'map', component: MapComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

its hard to tell what you are trying to do. couple of things to think about:

1. Your html openMapInNewTab method doesn't match you ts openMapInNewTab method. the html passes nothing but the typescript is expecting a string.

2. not sure you know what you are trying to do. if you want to go from your current component to map, then user [routerLink], but if you are trying to show your map component as part of your current page, then just include this tag in your html:

   <app-map></app-map>

or maybe you want to go to another tab in your browser? then use an anchor with target="_blank"