I am working on a simple Angular application with two components. My goal is to open one component in a new tab without moving any buttons between the components.
Here is an overview of my application setup:
Within my AppComponent.html file, there is a button. When this button is clicked, I want to open the MapComponent.html file in a new tab. I need to pass an address to the MapComponent.html file and display a Google map based on that address. Additionally, I want to include a user guide at the top of the Google map explaining how to obtain latitude and longitude coordinates from the map. To achieve this, I plan to set the height and width of the map to 200px. However, despite trying various methods such as adding routes, I have been unsuccessful in implementing this feature.
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 { }