pass array from parent component to child angular

Question

I have 2 components: parent and child. I want to send an array from parent to child when I click on a button(from parent-component) and call a function generate() for every object in array(in child-component). I have tried something with @Output() EventEmitter but I am not sure of this approach.

parent component

export class ViewCalendarsComponent implements OnInit {
    @ViewChildren(MonthHeaderComponent) months: any[];
    @Output() monthsList: EventEmitter<Date[]> = new EventEmitter();

    selectedMonths: any[];

    test() {
        this.monthsList.emit(this.selectedMonths);
    }
}

child component

export class MonthHeaderComponent implements OnInit {
    ngOnInit() {
    }
    generate(date: Date) {
        // code here....
    }

    show() {
        for (let i = 0; i <= monthsList.length; i++)
        {
            generate(monthsList[i]);
        }
    }

}

and in parent html

<button class="primary" (click)="test()"> Show </button>

  <div class="right view-calendar">
          <child *ngFor="let selectedMonth of selectedMonths" [monthsList]="show($event)"></child>
        </div>

How can I send this array and use it as parameter in a method?

@Output shoots things from the child to the parent. Since you want functionality in the parent to pass information to child, you would use @Input — rhavelka
– rhavelka, Commented Dec 4, 2018 at 14:17

Sachila Ranawaka · Accepted Answer · 2018-12-04 14:08:57Z

1

Just use the @input instead of output. And when the input value get modifies, use the ngOnChanges to catch the changes.

 child component
 export class MonthHeaderComponent implements OnInit {
    @Input monthsList: Date[]

   ngOnChanges(){
      // catch changes
   }
 }

In the parent template, pass the array.

<child *ngFor="let selectedMonth of selectedMonths" [monthsList]="monthArr"></child>

answered Dec 4, 2018 at 14:08

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

pass array from parent component to child angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related