"Cannot read property 'name' of undefined" in angular 2 using @input

I think I am doing everything right here.

Although the browser console shows the error "Cannot read property 'name' of undefined":

My media.component.ts looks like following:

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....');
}
}

My app.component.ts looks like:

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: `./app/app.component.html`,
 })
export class AppComponent  {
 firstMediaItem={
 name: 'sahil'
};
}

app.component.html looks like:

its, working
 <my-media-component [mediaItem]="firstMediaItem"></my-media-component>

media.component.html looks like:

<h1>{{mediaItem.name}}</h1>