Problems using ng-content through components in Angular-CodePudding

I have the following problem, I need to be able to pass code from a file where a component is used to its child component. I was thinking about doing the following approach with ng-content, but this solution doesn't work for me. I'm not sure if the way to use the ng-content is correct or I have a bug passing the information to the selects.

I would like to set out how I had intended to carry out this logic and I would like someone to point out what might be going wrong or an alternative to this.

file1.html:

<father-component>
<div content1>
    <div contentChild1 *ngIf="condition"></div>
    <div contentChild2 *ngIf="condition2"></div>
</div>
</father-component>

father-component.html:

<son>
<ng-content select="[content1]"
</son>

son.html

<div select="[contentChild1]" *ngIf="condition3"></div>
<div select="[contentChild2]" *ngIf="condition4"></div>

Thank you very much for your attention and best regards!

CodePudding user response：

You mixed up a few things. The Child component holds the different tags that can have the select attribute with an id. Inside the parent element you then can select which you want to use to render your html, by giving the element the id of the .

In your father-component-html you need to change it to this:

<son>
  <div content1></div>
</son>

and your son.html should look like this

<ng-content select="[content1]" *ngIf="condition3"></ng-content>
<ng-content select="[content2]" *ngIf="condition4"></ng-content>

CodePudding user response：

It is not possible to do this in this way as there cannot be 2 ng-content in the same html.