How to access Input data passed from parent component in Angular 2

Question

I have playlist component as a child Component, the parent pass in an input 'playlist' which is an Object of Array.

  playList: {
    headerPlaylists: Array<any>,
    bodyPlaylists: Array<any>
  } = {
    headerPlaylists: [],
    bodyPlaylists: []
  }

The Child Component as below

@Component({
  selector: 'playlist',
  styleUrls: ['app/channel/playlist/playlist.css'],
  templateUrl: 'app/channel/playlist/playlist.html',
  directives: [VideoItemComponent],
  inputs: ['playlist']
})

My question is, in my class, how do I get access to the inputs passed in from it's parent component, say, simply console.log(playlist), is there a way to do that?

export class PlaylistComponent {

  constructor() {

  }
}

drew moore · Accepted Answer · 2016-04-20 22:22:31Z

2

Thierry is correct w.r.t. the availability of inputs across the lifecycle, but how this works is much clearer if you use @Input() on the field rather than inputs in the metadata.

@Component({
  selector: 'playlist',
  styleUrls: ['app/channel/playlist/playlist.css'],
  templateUrl: 'app/channel/playlist/playlist.html',
  directives: [VideoItemComponent],
 // inputs: ['playlist'] // would be redundant
})
class PlaylistComponent implements OnInit {
  @Input() playlist: YourPlaylistType; // i.e. the data structure you posted

  ngOnInit(){
     // use this.playlist 
  }
}

Note that, largely for this reason, specifying inputs via @Input() is preferred over using inputs as per the ng2 style guide.

edited Apr 20, 2016 at 22:22

answered Apr 19, 2016 at 21:29

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-04-20 07:13:04Z

1

The playlist property will be available within the ngOnInit hook method of the component:

export class PlaylistComponent {
  playlist: any; // or a specify type instead of any

  constructor() {
    console.log(this.playlist); // is null
  }

  ngOnInit() {
    console.log(this.playlist); // is set
  }
}

In the constructor, the property isn't set yet.

For more details, see this page about lifecycle hooks:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

edited Apr 20, 2016 at 7:13

answered Apr 19, 2016 at 21:10

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

2 Comments

drew moore Over a year ago

You still need to have a playlist property on the class or this won't compile

Thierry Templier Over a year ago

You're right. I was focused on when displaying the property, so I forgot the property declaration. I updated my answer. Thanks!

Collectives™ on Stack Overflow

How to access Input data passed from parent component in Angular 2

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related