CODEWITHSUNDEEP
angularng-template
Pedro Cova
Pedro Cova

Reputation: 73

component inside component Angular

What is it called when one component is inside another? like in

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

And how it works?

Upvotes: 4

Views: 6847

Answers (2)

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

You have to use ng-content

<ng-content></ng-content>
<ng-content select="agm-marker"></ng-content>

you have to declare two components as:

agm-map.component.ts

@Component({
    selector: 'agm-map',
    template: '<ng-content></ng-content>
            <ng-content select="agm-marker"></ng-content>'
})
export class AgmMapComponent {
  ...
}

agm-marker.component.ts

@Component({
    selector: 'agm-marker',
    template: '<div>Marker</div>'
})
export class AgmMarkerComponent {
  ...
}

But I guess you want to pass latitude/longitude to your child component for that you can read the documentation related to how to pass data from parent to child component here

Upvotes: 7

ForestG
ForestG

Reputation: 18105

I am fairly sure, that the middle component won't get rendered. It is an invalid sytax.

You can, however, create recursive component patterns with at least 2 different components, like this:

In a "recursion-container" component's html:

<agm-map ....

in agm-map component.html:

<recursion-container"...

So you basicly need a middle-layer for it.

On basic component communication, you can read the documentation

Upvotes: 0

Related Questions