Home » Software Development » Multi Content Projection aka Multiple Transclusion

About Juri Strumpflohner

Juri Strumpflohner

Multi Content Projection aka Multiple Transclusion

How named/multi-slot transclusion works in Angular 2

If you’re an Angular developer, I’m sure you heard about transclusion. Sounds really weird and mysterious, at least that’s what I thought when I first heard it.

If you google for it, you’ll probably land on one of Thoughtram’s articles (as you’ll do 90% of the time if you search for Angular articles ). This one is about multiple transclusion and named slots which is available in Angular 1.5.
What it does is to allow you to basically specify multiple regions within your component’s template, which can be provided by the component user. This is a huge improvement as previously you had to do a couple of hacks to arrive to the same result.

But what about Angular 2, I thought, and so I tweeted:

And here we go.

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'multi-content',
  template: `
    <h3>Demoing content projection</h3>
    <div class="box">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="box">
      <ng-content select="[body]"></ng-content>
    </div>
  `,
  styles: [
    `
    .box {
      min-height: 30px;
      border: 1px solid black;
      display: block;
    }
    `
  ]
})
export class ContentProjectionComponent {}

We use <ng-content> alone if we don’t have the need for multiple content projection (as it’s apparently called in Angular 2). Otherwise, we can use the select property:

...
<ng-content select="[header]"></ng-content>
...

The component user can then define which content goes where:

<multi-content>
    <div header>This is projected to the header region</div>
    <div body>This goes to the body instead</div>
</multi-content>

Try it out yourself:

Important Note!

Currently there is an issue if you try to project some content that is controlled by one of the *-prefixed directives like *ngIf, *ngFor etc. As such, using our example above in the following way:

<multi-content>
  <span header>This is projected to the header region</span>
  <div body *ngIf="isVisible">
    This goes to the body instead.
  </div>
</multi-content>

..wouldn’t work, more specifically, the body region wouldn’t be projected. See issue 6303 for more details on this.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a sysadmin Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Introduction to NGINX
2. Apache HTTP Server Cookbook
3. VirtualBox Essentials
4. Nagios Monitoring Cookbook
5. Linux BASH Programming Cookbook
6. Postgresql Database Tutorial
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of