Everything seems to be set up correctly, but I'm encountering an error in the browser console that says "Cannot read property 'name' of undefined":
https://i.sstatic.net/TvfEr.png
This is how my media.component.ts file is structured:
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-media-component',
templateUrl: './app/media.component.html',
styleUrls: ['./app/media.component.css']
})
export class MediaAppComponent{
@Input() mediaItem;
onDelete(){
console.log('deleting....');
}
}
And here's a look at my app.component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app/app.component.html',
})
export class AppComponent {
firstMediaItem={
name: 'sahil'
};
}
Let's not forget about app.component.html, which is very straightforward:
its, working
<my-media-component [mediaItem]="firstMediaItem"></my-media-component>
The contents of media.component.html are minimal as well:
<h1>{{mediaItem.name}}</h1>