Projecting Content into Components with ng-content

In Angular, there are many ways to pass the data in our app. But sometimes we have complex HTML/typescript codes that are needed to pass into the component from outside. So if we want simplified code and don’t want to set the Html/typescript codes inside the server-component.html, then we can write the piece of code between opening and the closing element of the server-component tag(i.e. between ‹app-server›‹∕app-server› tag) and should change the component variables accordingly.

Example:

serverElement : 
{type:'server', name:'some-name', content:'some-value'}

app-component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1">
<app-server-element *ngFor=
         "let ele of serverElements" [element]="ele">
    <div class="card-text" 
        *ngIf="ele.type === 'server'" style="color: yellow;"
         Element name rendered is {{ele.name}} 
         Element content rendered is {{ele.content}}
    </div>
</app-server-element>
</div>
</div>
</div>

chevron_right


ng-content:
There is a special directive (‹ng-content›‹∕ng-content›) that is needed to be added in the server-component.html template, in the place where we want to render the content. It serves as a Hook you place in a component, to mark the place for the component where it should add any content it finds between the opening and closing tag.
server-component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="card">
    <div class="card-body"
        <h5 class="card-header text-uppercase">
            <strong>{{element.type}}</strong>
        </h5>
            <ng-content></ng-content> 
    </div>
</div>

chevron_right


serverElement :



{type:'server', name:'some-name', content:'some-value'}

app-component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
serverelements=[{type:'server'
                name:"TestServer",
                comp:'Just a Test!'}];
onAddedServer(data: {servername: string, 
                     servercomponent: string}){
  this.serverelements.push({
    type:'server',
    name:data.servername,
    comp:data.servercomponent
  })
}

chevron_right


Output:

Element name rendered is "some-name"
Element content rendered is "some-value"

Here, we added the HTML code via ng-content Hook, we add it between the opening and closing tags and therefore it will be projected into the server-component. It is a nice feature, which is special if we think about building reusable widgets. But if its more complex Html code then property binding is not really the best solution because angular will escape HTML text there, and then ng-content is the great tool to have.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.