Angular 9, Binding an array as an @Input for child component is not working

Question

For some reason, the array is not passed to the child components. What I'm missing?

My child component: .html

<ul>
    <li *ngFor="let item of items">
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-three-dots-menu',
  templateUrl: './three-dots-menu.component.html',
  styleUrls: ['./three-dots-menu.component.sass']
})
export class ThreeDotsMenuComponent implements OnInit {

  constructor() { }

  @Input()
  public itemsList : string[];

  ngOnInit(): void {

  }

  @Output()
  itemClicked: EventEmitter<string> = new EventEmitter<string>();

  itemHasBeenClicked(item)
  {
    alert(item);
    this.itemClicked.emit(item);
  }
}

parent component: .html

<app-three-dots-menu  [itemsList]="menuItems"></app-three-dots-menu>

.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-users-table',
  templateUrl: './users-table.component.html',
  styleUrls: ['./users-table.component.sass']
})
export class UsersTableComponent implements OnInit {

  constructor() { }
  menuItems : string[] = ['New User', 'Refresh'];

  ngOnInit(): void {  

  }



}

if I initialize the itemsList of the child component (ThreeDotsMenuComponent) in the ngOnInit it works and shows properly. any other option is not working, include this line

@Input()
  public itemsList : ["item1","Item2"];

I'm sure I'm missing a small thing somewhere, I already followed many instructions and read many posts here and in other forums, and still stuck.

Abhishek · Accepted Answer · 2020-04-15 08:43:23Z

1

In the child template html you are referring to items instead of itemsList

Change the child template to:

<ul>
    <li *ngFor="let item of itemsList">
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

Have a look at the following: https://stackblitz.com/edit/angular-v8sk5f?file=src%2Fapp%2Fchild%2Fchild.component.html

answered Apr 15, 2020 at 8:43

Abhishek

1993 bronze badges

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

Comments

Poul Kruijt · Accepted Answer · 2020-04-15 08:22:16Z

1

Well, you have to use = and not :. With the : you are defining the type of the property, not the actual value:

export class UsersTableComponent implements OnInit {
  menuItems: string[] = ['New User', 'Refresh'];
}

answered Apr 15, 2020 at 8:22

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

1 Comment

Rami Khawaly Over a year ago

Thanks, you are right, but still not working with this modification (I will update the question)

mario89 · Accepted Answer · 2020-04-15 08:49:09Z

1

In ThreeDotsMenuComponent html part, you are reffering to items, but you need use itemsList

<ul>
    <li *ngFor="let item of items"> <!-- here, use itemsList -->
        <a (click)="itemHasBeenClicked(item)">{{item}}</a>
    </li> 
<ul>

answered Apr 15, 2020 at 8:49

mario89

1431 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular 9, Binding an array as an @Input for child component is not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related