Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Multi Content Projection aka Multiple Transclusion

DZone's Guide to

Multi Content Projection aka Multiple Transclusion

If you're an Angular developer, I'm sure you've heard about transclusion. Sounds really weird and mysterious, at least that's what I thought when I first heard it. Read on to learn more.

· Web Dev Zone
Free Resource

Get the senior executive’s handbook of important trends, tips, and strategies to compete and win in the digital economy.

If you're an Angular developer, I'm sure you've 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). That one is about multiple transclusion and named slots which are available in Angular 1.5. They basically allow you to 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:

Is multiple slot "transclusion" already possible in #angular2? //cc @gdi2290@AngularClass

— Juri Strumpflohner (@juristr) January 14, 2016

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>

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.

Read this guide to learn everything you need to know about RPA, and how it can help you manage and automate your processes.

Topics:
angular ,web ,javascript

Published at DZone with permission of Juri Strumpflohner. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}