(Angular 5/Typescript) @Input() not working

Question

I have two components parent & child, and i want to pass the category defined in parent to be used in child. But getting error undefined.

Parent Component:

export class MenuComponent implements OnInit {
  category: string;
  constructor() { }

  ngOnInit() {
    this.category = "Human";
  }

And the Child component is:

export class MenuListComponent implements OnInit{
 @Input() category: string;
 // category = 'Man';
 constructor() { }

  ngOnInit() {
  console.log(this.category);
}

Parent component template

<div class="container">
  <div class="row">
    <app-menu-list></app-menu-list>
  </div>
</div>

Output is undefined.

Can you add template code as well please so we can see how you're passing the input? — user184994
– user184994, Commented Jan 27, 2018 at 12:15

AVJT82 · Accepted Answer · 2018-01-27 12:28:57Z

4

You actually need to pass your variable to the child:

<app-menu-list [category]="category"></app-menu-list>

answered Jan 27, 2018 at 12:28

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

(Angular 5/Typescript) @Input() not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related