Property 'hero' does not exist on type 'AppComponent'

Issue

I'm doing the "Tour of Heroes" tutorial. But I'm getting this error and couldn't figure out how to fix it myself.

src/app/app.component.html:3:25 - error TS2339: Property 'hero' does not exist on type 'AppComponent'.

3 <div><span>Id: </span>{{hero.id}}</div>
                          ~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

app.component.html below

<h1>{{title}}</h1>
<div><span>Id: </span>{{hero.id}}</div>
<div><span>Name: </span>{{hero.name}}</div>

heroes.component.ts below

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
   hero: Hero = {
     id: 1,
     name: 'Windstorm',
   }



  constructor() { }

  ngOnInit(): void {
  }

}

Solution

You are trying to interpolate the property "hero" declared in HeroComponent inside app.component. You can't do this. You can do the interpolation inside AppComponent, if you declare the proprerty inside app.component.ts. If you necessary need to declare hero inside HeroComponent and use it inside AppComponent, you need to use some strategy to comunicate between componets. You can do this with @Input/@Output decorators, or using a Service

Answered By - devj