error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'

Question

hi im new to angular and i cant seem to figure out what i'm doing wrong. here is the type script code.

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;
      }
    }

below is the 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>

below is the error

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.

Answer 1

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

You define feature to be of type string , which is clearly not the case. Check the docs of app-header and add the correct type.

Changing to any should resolve your problem for now, but correct typing is highly recommended.

Answer 2

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

check this code in header.component.html may be