Adding Navigation With Event Binding and Ngif

We add navigation between components using event binding and ngIf. The parent component listens for a click event on navigation links in the child header component. The header component emits the selected feature as an event. The parent component captures this to set the currently loaded feature, and uses ngIf to conditionally display the recipes or shopping list component based on the value.

Uploaded by

Jay R Fuenzalida Valeroso

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

118 views

Adding Navigation With Event Binding and Ngif

Uploaded by

Jay R Fuenzalida Valeroso

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 3

ADDING NAVIGATION with Event Binding and ngIf

We have 2 Components in our Parent Component in app.component.html

<app-recipes></app-recipes>
<app-shopping-list></app-shopping-list>
Our goal is to only show one of this component every time we click each one of
them.

APP COMPONENT - Parent Component

HEADER COMPOMENT - Child Component

STEPS

1.Head Component is our Child Component

In header.component.html
where will see see our Recipes and Shopping List Link
-we added (click) event and assign a method called onSelect()
-then we pass in a string value.
-onSelect method will define that on the typescript later on.
-the string value could be any name.
-Our goal is to click this link attached a function into it and call the below
string values.

***********

<li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>

<li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>

2. Head Component is our Child Component

In header.component.ts
inside of our HeaderComponent class, this is where we'll define our onSelect(){}
method.
we have to provide an associated parameter
we can put any parameter name, we chose feature with the type of string because
what we are calling is the link in our header component w/c is the Recipes Link
and Shopping List link.
They are our feature component.
The type is string because remeber the value that we pass when we called the
method was "recipe"
and "shopping-list" string?

Then we created an event where we stored in a parameter called featureSelected

which could be any name.

We used the @Output() decorator in our event which we also imported

@Output() this decorator makes the event listenable outside the other component
or parent component.
At the end of the EventEmiiter we also added () to instatiate our EventEmitter.

EventEmitter was also imported.

we access the property where we stored the EventEmitter and use the emit method
and pass in our
method's parammeter called feature.

***********
import { Output } from '@angular/core';
import { EventEmitter } from 'events';

@Output() featureSelected = new EventEmitter<string>();

onSelect(feature: string) {
this.featureSelected.emit(feature);
}

3. In our Parent Component in app.component.html

Where we have our <app-header></app-header> Component
This is where we are going to listen to our event which is the featureSelected
property
Then we'll call a method here which we'll defin later on the app.component.ts

To get the data we are receiving from our events property.

We are passing in $event in our method.
Again we will define this function later on in the app.compoent.ts

************
<app-header (featureSelected)="onNavigate($event)"></app-header>

4. in app.component.ts
Let's define our method.

we pass in feature property with type of string but it could be any property
name.
why feature property, remember our goal to click our feature link which is the
recipe and shoppiing list link?
then we have initiated a property with value of a default feature which
'recipe'