Почему привязка данных не работает в Angular 13?

Я создал событие в своем компоненте заголовка и пытаюсь прослушать его в компоненте приложения, но оно не работает должным образом.

В header.component.html при нажатии на «Рецепты» он отправляет строку «рецепт» в метод «onSelect()», а при нажатии на «Список покупок» он отправляет строку «список покупок» в метод «onSelect()».

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

В header.component.ts я создал событие "featureSelected", которое передает данные, независимо от того, что мы получаем в методе "onSelect()".

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

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

Теперь мы перечисляем событие «featureSelected» в app.component.html, если оно выдает строку «рецепт», которую мы загружаем, компонент рецепта, в противном случае мы загружаем компонент «список покупок».

<app-header> (featureSelected) = "onNavigate($event)"</app-header>
<div class = "container">
  <div class = "row">
    <div class = "col-md-12">
     
    <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;
}

Не загружается компонент списка покупок при нажатии на «Список покупок». Я думаю, что слушатель работает неправильно, хотя код выглядит нормально. Пожалуйста, помогите мне найти проблему и дайте мне знать, если потребуется дополнительная информация.