[Fixed] Hot to call a function inside a child component.ts from a parent component.ts in Angular


In app.component.html I print a list of section.component.html

  <div class="col-md-12 col-lg-4" *ngFor="let section of sectionObjectList">
    <app-section [section]="section"></app-section>

When the template is rendered, I want to call from app.component.ts (the parent) a function inside the first section.component.ts of the list (the children).

What’s the correct way to do it?
Thank you


You can use the @Output decorator:

Parent component:


 <div class="col-md-12 col-lg-4" *ngFor="let section of sectionObjectList">
    <app-section [section]="section" (callback)="childCallback($event)"></app-section>


childCallback(event) {
 console.log("Event data: ",event);

Child component:

@Output() callback = new EventEmitter<string>();

someFuntion() {

Sharing data between child and parent directives and components

Use ViewChild for DOM manipulations (change the native HTML element), and use input/output for data binding and controlling the state of a child component from the parent to keep him isolated and stateless.

Leave a Reply

(*) Required, Your email will not be published