Cannot find name 'Output' - Angular

I was trying to learn and implement @Input and @Output decorators in Angular. And when I tried @Output, I got the following error Cannot find name ‘Output’ in Angular.

Cannot find name ‘Output’ – Angular

I was trying to use @Output decorator to enable the event “menuItemSelected” to listen to from outside of the HeaderComponent as shown below.

header.component.ts

import { Component, EventEmitter } from '@angular/core';

@Component({
   selector:'app-header',
   templateUrl: './header.component.html'
})

export class HeaderComponent {
   collapsed = true;

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

   onSelect(menuItem: string) {
      this.menuItemSelected.emit();
   }

}

Therefore, I have added @Output to the event property “menuItemSelected” to make it listenable from the parent component (for example, AppComponent).

header.component.html

<nav class="navbar navbar-default"> 
    <div class="container-fluid">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle" (click)="collapsed = !collapsed">
                  <span class="icon-bar" *ngFor="let iconBar of [1, 2, 3, 4]"></span>
                </button>
                <a routerLink="/" class="navbar-brand">Myrecipes.com</a>
        </div>
        <div class="navbar-collapse" [class.collapse]="collapsed" (window:resize)="collapsed = true">

            <ul class="nav navbar-nav">
                <li><a href="#" (click)="onSelect('recipes')">Recipes</a></li>
                <li><a href="#" (click)="onSelect('shopping-list')">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>

AppComponent template

<app-header (menuItemSelected)="onNavigate($event)"></app-header>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <app-recipes *ngIf="loadedPage === 'recipes'"></app-recipes>
            <app-shopping-list *ngIf="loadedPage === 'shopping-list'"></app-shopping-list>             
        </div>
    </div>
</div>

I got the following error

ERROR in src/app/header/header.component.ts:12:5 - error TS2304: Cannot find name 'Output'.

12    @Output() menuItemSelected = new EventEmitter<string>();
       ~~~~~~

Solution

Typescript could not figure out the @Outputdecorator and add the import statement.

Therefore, you need to add or modify the following import statement manually in your component class.

import { Component, EventEmitter, Output } from '@angular/core';

Now, the above import statement includes Output along with Component and EventEmitter from ‘@angular/core’.

That’s it. The error Cannot find name ‘Output’ should have disappeared.

Hope it helped 🙂

Cannot find name ‘Output’ – Angular

Solution

References: