@Input property is undefined in Angular 2’s onInit

by

The reason you’re getting undefined in ngOnInit is because at the point where the component is initialised you haven’t actually passed in a Hero object 

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

At this point selectedHero has no value in your AppComponent and doesn’t until the click event on the list calls the onSelect method

Edit: Sorry realised I didn’t actually offer a fix. If you add an ngIf to my-hero-detail

<my-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></my-hero-detail>

you should this will delay the initialisation of the my-hero-detail component and you should see the console output. This wont however output again when the selected hero changes.

More Related Contents:

  1. Global Events in Angular
  2. How to show a loading spinner while waiting on an observable getting data from a service in Angular
  3. Why use “?” operator in template binding?
  4. angular2 manually firing click event on particular element
  5. How can I watch for changes to localStorage in Angular2?
  6. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  7. Angular2 – Redirect to calling url after successful login
  8. async/await in Angular `ngOnInit`
  9. Connect Angular application with ReactJS app?
  10. How to make directives and components available globally
  11. Handling 401s globally with Angular
  12. Angular2 router keep query string
  13. Angular2 – Validate and submit form from outside
  14. In Angular, how to add Validator to FormControl after control is created?
  15. Getting Image from API in Angular 4/5+?
  16. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  17. Angular 2 – Using Shared Service
  18. Angular 4 HttpClient Query Parameters
  19. Mat-table Sorting Demo not Working
  20. How to clear template cache?
  21. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  22. fromPromise does not exist on type Observable
  23. Angular 4 call parent method in a child component
  24. Type casting within a template in Angular 2
  25. How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
  26. What are the parameters for the number Pipe – Angular 2
  27. Angular2 ngModel inside ngFor (Data not binding on input)
  28. How to use reportProgress in HttpClient in Angular? [duplicate]
  29. How to generate components in a specific folder with Angular CLI?
  30. What are all the index.ts used for?

Leave a Comment