How to get access to child component object in Angular

Question

I have parent component id="componentOne" where is included another child component <app-buttons>:

<div id="componentOne">
    <app-buttons
    [component]="'WeeklyScheduleComponent'"
    [buttonTypes]="['add', 'filter']"
    [position]="'right-bottom'"
  ></app-buttons>
</div>

Inside component app-buttons there is:

 ngOnInit() {
    this.buttonUsage = new ButtonUsage(this.component, this.buttonTypes);
  }

So, how to get access to this.buttonUsage from parent component after initialization this.buttonUsage = new ButtonUsage?

Possible duplicate of [How can I select an element in a component template?](https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-template) — ViqMontana, Jul 01 '19 at 08:51

Fateh Mohamed · Accepted Answer · 2019-07-01T08:57:28.587

1

You can access using the viewChild and your component instance will be available in ngAfterViewInit

@ViewChild(AppButtonsComponent) appButtonsViewChild: AppButtonsComponent;


ngAfterViewInit() {
 console.log(this.appButtonsViewChild.buttonUsage );
}

if you have multiple children you can use @ViewChildren decorator along side the QueryList generic type

@ViewChildren(AppButtonsComponent) appButtonsViewChildren: QueryList<AppButtonsComponent>;

ngAfterViewInit() { 
  let buttons: AppButtonsComponent[] = this.appButtonsViewChildren.toArray();
  console.log(buttons);
}

edited Jul 01 '19 at 08:57

answered Jul 01 '19 at 08:51

Fateh Mohamed

20,445
5
43
52

1

Since @angular 8: @ViewChild(AppButtonsComponent, {static: false}), or {static:true}, depending on when you want your component to be available at your typescript. – julianobrasil Jul 01 '19 at 08:59

How to get access to child component object in Angular

1 Answers1