Angular: ng-content

Angular: ng-content

sandeep negi's photo
sandeep negi
·

1 min read

Introduction

Where to use this

  • lets say we wants to send some custom html to the component. in that case we can use ng-content to send some HTML in the component.

Use

<div class="panel panel-default">
    <div class="panel-heading">{{ element.name }}</div>
    <div class="panel-body">
        <ng-content></ng-content>
    </div>
</div>
  • Now let's send some HTML in the component. here we have sent paragraphs and some HTML inside the app-server-element component and that will be rendered in the above-mentioned component, If we will not use ng-content then the HTML will be ignored.
<div class="container">
  <app-cockpit (serverCreated)="onServerAdded($event)" (blueprintCreated)="onBlueprintAdded($event)">
  </app-cockpit>
  <hr>
  <div class=" row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [srvElement]="serverElement">
        <p>
          <strong *ngIf="serverElement.type === 'server'" style="color: red">{{ serverElement.content }}</strong>
          <em *ngIf="serverElement.type === 'blueprint'" style="color: rgb(9, 143, 80);">{{ serverElement.content
            }}</em>
        </p>

      </app-server-element>
    </div>
  </div>
</div>
Angular