Angular get content inside component balises

Python 0
Viewed 33

I'm searching how to get the content inside my component call. Is there a way to get it?

<my-component>get what is here inside in my-component</my-component>

<my-select [list]="LMObjects" [multiple]="true">{{MyObject.MyName}}</my-select>

and it would generate

<mat-form-field>
    <mat-select  multiple="@InputMultiple">
        <mat-option *ngFor="let obj of ListObj" [value]="obj.id">
        {{@InputChildBlock}} // copy of block inside balises
        </mat-option>
    </mat-select>
</mat-form-field>
parent-child components typescript angular
2 Answers

you can do this in your-component html:

<ng-content></ng-content>

and if you need pass multiple html tags you can do it:

in the component html file:

<ng-content select="p"></ng-content> 
<ng-content select="div"></ng-content>

in place where you will your component:

<my-component>
  <p> lorem ipusm text </p>
  <div> basic div </div>
</my-component>
Mohamed Ziad0

If you have a parent component which uses a child component and want to pass in something, e.g. text or another component, that should be displayed inside the child component, then content-projection is what you need.

parent html

<p>I'm the parent. Look at my child here:</p>
<my-child>I'm the child :)</my-child>

child html

<ng-content></ng-content><br />
Nice to meet you!

Resulting DOM:

<p>I'm the parent. Look at my child here:</p>
<my-child>
  I'm the child :)
  Nice to meet you!
</my-child>

If this is not what you are looking for, please specify more.

Gunnar B.0
Related