Angular 2 pass click to app.component from route-outlet

Question

I am new to angular 2 and creating an application

app.routing.ts

const appRoutes: Routes = [
    {path:'', component:HomeComponent},
    { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

app.component.html

<app-navbar (sideMenuToggleClicked)="handleSideMenuToggle()"></app-navbar>
<div class="container-fluid">
    <div class="row">
        <div class="col col-sm-2 test-border" *ngIf="sideBarToggle">
            <h1>
                {{sideBarToggle }}
            </h1>
        </div>
        <div class="col col-10 test-border" [ngClass]="sideBarToggle?'col-10':'col-12'">
            <app-alert *ngIf="showAlert"></app-alert>
            <router-outlet (showAlert)="handleShowAlert($event)"></router-outlet>
        </div>
    </div>
</div>

register.component.ts

@Output() showAlert = new EventEmitter();
onSubmit(){
 this.registerService.getValues(this.registrationForm.value).then((result:any)=>{
        console.log(result)
       }).catch((error:any)=>{
         this.showAlert.emit({type:'error', message:error});
       });

      }

As you can see i was successful in capturing the click in app-navbar which is loaded as component.

Now i am trying to create a common alert notification and when i try it with

<router-outlet (showAlert)="handleShowAlert($event)"></router-outlet>

I was not able to capture the EventEmitter Click.

Question is how can transfer the emit from register.component.html to app.component.html

http://stackoverflow.com/questions/37662456/angular-2-output-from-router-outlet — Alaksandar Jesus Gene, Mar 02 '17 at 17:04
I got it working with above two links. The answer is from stackoverflow and the provider we need to define in app.module.ts not in components — Alaksandar Jesus Gene, Mar 02 '17 at 17:06

score 0 · Answer 1 · answered Mar 02 '17 at 16:33

0

It will not work like you are trying, it will try to look showAlert on RouterOutlet directive which it will not find.

you need to check how Parent and children communicate via a service.

Hope this helps!!

answered Mar 02 '17 at 16:33

Madhu Ranjan

17,334
7
60
69

Angular 2 pass click to app.component from route-outlet

1 Answers1