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?
Add a comment
|
2 Answers
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
Comments
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
