Why databinding is not working in Angular 13?-CodePudding

I have created an event in my header component and trying to listen it in app component, but it is not working as expected.

In header.component.html, on clicking on "Recipes" it is sending 'recipe' string to "onSelect()" method and on clicking on "Shopping List", it is sending string 'shopping-list' to "onSelect()" method.

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

In header.component.ts , I have created event "featureSelected" which is emitting data, whatever we receive in "onSelect()" method.

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

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

Now, we are listing event "featureSelected" in app.component.html, if it emits string "recipe" we load, recipe component else we load "shopping-list" component.

<app-header> (featureSelected)="onNavigate($event)"</app-header>
<div >
  <div >
    <div >
     
    <app-recipes *ngIf="loadedFeature === 'recipe'"></app-recipes>
      <app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
      </div>
  </div>
</div>

app.component.ts

 loadedFeature='recipe';

 onNavigate(feature:string){
   this.loadedFeature=feature;
}

It is not loading shopping-list component on clicking on "Shopping List". I think listener is not working properly even though code looks fine. Please help me in finding the issue and please let me know, if any additional information required.

CodePudding user response：

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

First of all this is not correct. You need to have output method inside of app-header like this.

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

And with that you can access in the onNavigate($event) and store it to some property.

There is stackblitz with working example StackBlitzDemo

If this helps mark it as answer pls.