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

Content Projection in Angular Element With Slot in Angular 7.0

DZone's Guide to

Content Projection in Angular Element With Slot in Angular 7.0

We take a look at a few new techniques Angular developers can use to perform content projection in Angular 7. Read on to get started!

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In this article, we will learn how to project content in an Angular Element. If you are not familiar with the following:

  • Shadow DOM
  • ViewEncapsulation
  • Content Projection

I recommend you to read the below articles before moving forward:

We can use ng-content to perform content projection, as shown in the listing below:

import { Component } from '@angular/core';
@Component({
    selector: 'app-greet',
    template: `
 <h2>{{title}}</h2>
 <ng-content></ng-content>
`
})
export class GreetComponent {
    title = 'Greet';
}

You can project content as shown in the next listing:

<h1>
      Welcome to {{ title }}!
</h1>
<app-greet>
      <h3>Hello Foo</h3>
</app-greet>

The challenge with the above approach is, "If you use GreetComponent as an Angular Element" then you will not able to project content. To understand this better, let us start by converting GreetComponent  to an Angular Element. You can learn how to create Angular Element step-by-step, here.

After converting GreetComponent to an Angular Element, AppModule should look like the listing below:

import { AppComponent } from './app.component';
import { GreetComponent } from './greet.component';

@NgModule({
    declarations: [
        AppComponent, GreetComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [GreetComponent],
    entryComponents: [GreetComponent]
})
export class AppModule {

    constructor(private injector: Injector) {
        const customElement = createCustomElement(GreetComponent, { injector });
        customElements.define('app-root', customElement);
    }

    ngDoBootstrap() {

    }
}

Now you can use GreetComponent in the index.html file, as shown in the listing below:

<body>
     <!-- <app-root></app-root> -->
     <app-greet>
         <h2>hey Foo</h2>
     </app-greet>
</body>

Upon running application, you will find that <h2> element has not been projected to the Angular ElementGreetComponent.

After starting Angular 7, we have another option for performing content projection, slot. To do content projection in an Angular Element, you have to do following:

  1. Set ViewEnacpsulation to ShadowDom.
  2. Use slot instead of <ng-content>

Let us modify GreetComponent as shown in the listing below:

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-greet',
    template: `
 <h2>{{title}}</h2>
 <slot name='message'></slot>
`,
    encapsulation: ViewEncapsulation.ShadowDom
})
export class GreetComponent {
    title = 'Greet Component';
}

We have set the encapsulation to ShadowDom and replaced <ng-content> with <slot>

Angular has been supporting ShadowDom since its beginning. Until Angular 6.0, there were three-encapsulation modes:

  1. Emulated

  2. Native

  3. None

Emulated was the default mode and the Native mode was used to create ShadowDom V.0. Starting with Angular 6.1, Angular started supporting ShadowDom V.1, also. You can enable ShadowDom V.1 on components using a fourth option for the ShadowDom. If you set encapsulation to ShadowDom, Angular creates Shadow Dom V.1. To do content projection in an Angular Element, you need to have encapsulation set to ShadowDom.

Now, upon running the application, you will find the content has been projected as shown in the image below:

Therefore, by using ShadowDom Encapsulation mode and slot you can project content in Angular Element in Angular 7.0. I hope you found this post useful. Thanks for reading. If you like this post, please share it. 

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
content projection ,angular element ,web dev ,angular 7 ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}