I used the googleplace directive for Google places autocomplete . It works when I use this directive in the AppComponent, as shown in the link, but does not work when I used it in child components.
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router'; import { BaseComponent } from './components/base/base.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; const routes: RouterConfig= [ {path:"",redirectTo:"/admin",pathMatch:'full'}, {path:"admin",component:BaseComponent, children:[ { path: '', component: BaseComponent}, { path: 'dashboard', component: DashboardComponent}, ] } ]; export const appRouterProviders = [ provideRouter(routes) ];
main.ts 
import {bootstrap} from '@angular/platform-browser-dynamic'; import {AppComponent} from './app.component'; import {appRouterProviders} from './app.routes'; bootstrap(AppComponent,[appRouterProviders]);
app.component.ts 
import {Component} from '@angular/core'; import {ROUTER_DIRECTIVES} from '@angular/router'; @Component({ selector : 'my-app', template: ` <router-outlet></router-outlet> ` , directives:[ROUTER_DIRECTIVES] }) export class AppComponent { }
base.component.ts 
import {Component,OnInit} from '@angular/core'; import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; @Component({ selector: 'app-base', templateUrl:"../app/components/base/base.html", directives:[ROUTER_DIRECTIVES], precompile:[] }) export class BaseComponent implements OnInit{ constructor(private _router:Router){} ngOnInit():any{ this._router.navigate(["admin/dashboard"]); } }
base.html has <router-outlet></router-outlet> has its content
dashboard.component.ts 
import {Component,OnInit} from '@angular/core'; import { provideRouter, RouterConfig,ROUTER_DIRECTIVES,Router } from '@angular/router'; import {GoogleplaceDirective} from './../../../directives/googleplace.directive'; @Component({ selector: 'dashboard', template:` <input type="text" [(ngModel)] = "address" (setAddress) = "getAddress($event)" googleplace/> `, directives:[ROUTER_DIRECTIVES,GoogleplaceDirective] }) export class DashboardComponent implements OnInit{ constructor(private _router:Router){} ngOnInit():any{ // this._router.navigate(["dashboard/business"]); } public address : Object; getAddress(place:Object) { this.address = place['formatted_address']; var location = place['geometry']['location']; var lat = location.lat(); var lng = location.lng(); console.log("Address Object", place); } }
googleplace.directive
import {Directive, ElementRef, EventEmitter, Output} from '@angular/core'; import {NgModel} from '@angular/common'; declare var google:any; @Directive({ selector: '[googleplace]', providers: [NgModel], host: { '(input)' : 'onInputChange()' } }) export class GoogleplaceDirective { @Output() setAddress: EventEmitter<any> = new EventEmitter(); modelValue:any; autocomplete:any; private _el:HTMLElement; constructor(el: ElementRef,private model:NgModel) { this._el = el.nativeElement; this.modelValue = this.model; var input = this._el; this.autocomplete = new google.maps.places.Autocomplete(input, {}); google.maps.event.addListener(this.autocomplete, 'place_changed', ()=> { var place = this.autocomplete.getPlace(); this.invokeEvent(place); }); } invokeEvent(place:Object) { this.setAddress.emit(place); } onInputChange() { } }
index.html 
Output:
Update:
It was found that it works fine when there is one router-exit tag in the project, but does not work when we have a nested router-exit, as the example above has a nested router-exit
github link here
Is there a problem with directory code with child components of a component? Please let me know how I can solve this problem.