Hello, I'm a newcomer to utilizing Angular and I'm struggling to identify where my mistake lies. Below is the TypeScript code in question:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loadedFeature = 'recipe';
onNavigate(feature: string) {
this.loadedFeature = feature;
}
}
Here is the corresponding HTML:
<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
<div class="row">
<div class="col-md-12">
<app-recipies *ngIf="loadedFeature === 'recipe'"></app-recipies>
<app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
</div>
</div>
</div>
Furthermore, here is the error message encountered:
Error: src/app/app.component.html:1:43 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.
1 <app-header (featureSelected)="onNavigate($event)"></app-header>
~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.