How to populate Angular nested component in ngFor loop?

Question

I have a nested component in html side like following:

<main>
   <ng-content *ngFor="let item in data">
     <car *ngIf="item.type=='car'"></car>
     <plane *ngIf="item.type=='car'"></plane>
   </ng-content>
</main>

My car and plane components are implemented a base cehicle class.

export abstract class BaseVehicleComponent{
    onVehicleCreated(){
        console.log("on vehicle created.")
    }
}

When a vehicle created, I want to populate an event in main component.

@Component({
   selector: 'main',
})
export class MainComponent{

     @Output() vehicleCreated = new EventEmitter<void>();

}

And hml updated like this:

<main (vehicleCreated)="onVehicleCreated($event)">
   <ng-content *ngFor="let item in data">
     <car *ngIf="item.type=='car'"></car>
     <plane *ngIf="item.type=='car'"></plane>
   </ng-content>
</main>

but base methot does not fire.

Actually nowhere, where can I cal?.Main component and vehicle components are seperated, and may be different modules. So I want to do a loosely coupled communication. — barteloma
– barteloma, Commented Sep 22, 2019 at 18:57

Nikhil · Accepted Answer · 2019-09-22 19:45:39Z

1

BaseVehicleComponent should have EventEmitter not MainComponent.

BaseVehicleComponent:

export abstract class BaseVehicleComponent{
   @Output() vehicleCreated = new EventEmitter<void>();
}

MainComponent should have onVehicleCreated() function not BaseVehicleComponent.

MainComponent:

export class MainComponent{  
  onVehicleCreated(){
    console.log("on vehicle created.")
  }
}

In car or plane components' ngOnInit() method call event emitter's emit() method.

this.vehicleCreated.emit();

Modify MainComponent's template to be

<ng-container *ngFor="let item in data">
  <car *ngIf="item.type=='car' (vehicleCreated)="onVehicleCreated($event)"></car>
  <plane *ngIf="item.type=='plane' (vehicleCreated)="onVehicleCreated($event)"></plane>
</ng-container>

Live demo on StackBlitz: https://stackblitz.com/edit/angular-thvzue

For more info, check out my answer on communication between parent and child components.

edited Sep 22, 2019 at 19:45

answered Sep 22, 2019 at 19:05

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

5 Comments

Nikhil Over a year ago

@barteloma - Check out my edited answer. You can also see this working on StackBlitz.

barteloma Over a year ago

I put my html <main> and <ng-container> in app.component.html, so an error occured because of onVehicleCreated() not found.

Nikhil Over a year ago

No, just put <main> in app-component. You can see how I did it in the StackBlitz.

barteloma Over a year ago

Can I put in app.component.html and fire onVehicleCreated() of mainComponent?

Nikhil Over a year ago

But then data variable should be placed in app-component. Also then what is the purpose of main-component when you are placing all the components directly in app-component?

Collectives™ on Stack Overflow

How to populate Angular nested component in ngFor loop?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related