Monday, 31 December 2018

Transclusion using ng-content

Understanding Transclusion
Transclusion means the inclusion of the content of one document in another document.


Content Projection in Angular with ng-content
Let’s say you have a home component with a decorator that goes a bit like this:

@Component({
    selector: 'home',
    template: `
      <h1>Heroic Title</h1>
      <p>Something good...</p>
    `
  })

And let’s say you want to be able to do something like this when including the component:

<home>
  <p>Something else</p>
</home>

Then what you would do is use <ng-content></ng-content> like this in your component template:

@Component({
    selector: 'home',
    template: `
      <h1>Heroic Title</h1>
      <p>Something good...</p>
      <ng-content></ng-content>
    `
  })

The result will then be the following:

<h1>Heroic Title</h1>
<p>Something good...</p>
<p>Something else</p>

And with this, you could also place components inside your wrapper component. Here’s how you would, for example, project the myNav component inside the home component:

<home>
  <myNav></myNav>
</home>

You can also use select on ng-content to define what should be included. In this example, only div elements would be included:

@Component({
    selector: 'home',
    template: `
      <h1>Heroic Title</h1>
      <p>Something good...</p>
      <ng-content select="div">
      </ng-content>
    `
  })

And you can use the [attr] syntax to select only elements that have a specific attribute. In the following example, only something like <p intro>…</p> would be included:

@Component({
    selector: 'home',
    template: `
      <h1>Heroic Title</h1>
      <p>Something good...</p>
      <ng-content select="[intro]">
      </ng-content>
    `
  })

Reference: https://alligator.io/https://medium.com/https://codecraft.tv/

0 comments:

Post a Comment

Topics

ADFS (1) ADO .Net (1) Ajax (1) Angular (47) Angular Js (15) ASP .Net (14) Authentication (4) Azure (3) Breeze.js (1) C# (49) CD (1) CI (2) CloudComputing (2) Coding (8) CQRS (1) CSS (2) Design_Pattern (7) DevOps (4) DI (3) Dotnet (10) DotnetCore (19) Entity Framework (4) ExpressJS (4) Html (4) IIS (1) Javascript (17) Jquery (8) Lamda (3) Linq (10) microservice (4) Mongodb (1) MVC (46) NodeJS (8) React (10) SDLC (1) Sql Server (32) SSIS (3) SSO (1) TypeScript (3) UI (1) UnitTest (2) WCF (14) Web Api (16) Web Service (1) XMl (1)

Dotnet Guru Archives