header.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe Book</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" (click)="onReceipeList()">Recipes</a></li>
<li><a href="#" (click)="onShoppingList()">Shopping List</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Save Data</a></li>
<li><a href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
header.component.ts
import { Component, Output } from '@angular/core';
import { EventEmitter } from 'events';
@Component({
selector: 'app-header',
templateUrl: './header.component.html'
})
export class HeaderComponent {
// triggering the methods
@Output()receipeClick=true;
@Output()shoppingClick=true;
onReceipeList(){
console.log("we are inside Receipe List")
this.receipeClick=false;
}
onShoppingList(){
console.log("we are inside shooping click")
this.shoppingClick=false;
}
}
app-component.html
<app-header></app-header>
<div class="container">
<div class="row>
<div class="col-md-12 ¨>
<app-recipes *ngIf="!receipeClick"></app-recipes>
<app-shopping-list *ngIf="!shoppingClick"></app-shopping-list>
</div>
</div>
</div>
1)I need to render my code conditionally.
2)Whenever a user clicks the header component, I have an event listener that triggers a method which changes the boolean value in my code and exports it as output.
3)This change in expression is then listened to by the list component.
However, my code isn't working and I'm unsure of why.