Content Projection in Angular Element with Slot in Angular 7.0
Learn about content projection in an Angular element with slot in Angular 7.
Dhananjay Kumar
3min read
In this article, we will learn how to project content in an Angular Element. As of now, you know that we use ng-content to carry out content projection as shown in the next listing:
import { Component } from '@angular/core';
@Component({
selector: 'app-greet',
template: `
<h2>{{title}}</h2>
<ng-content></ng-content>
`
})
export class GreetComponent {
title = 'Greet';
}
You can also 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 your Angular Element,” you will not able to project content. To understand this better, let us start with converting GreetComponent to an Angular Element. Here you can learn Step by Step to Create Angular Element.
After converting GreetComponent as 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 on index.html as shown in the listing below:
<body> <!-- <app-root></app-root> --> <app-greet> <h2>hey Foo</h2> </app-greet> </body>
Upon running the application, you will find that the <h2> element has not been projected to the Angular Element GreetComponent.
Starting with Angular 7, we have other option to do content projection slot. To do content projection in Angular Element, you have to do following:
- Set ViewEnacpsulation to ShadowDom
- 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 encapsulation to ShadowDom and replaced <ng-content> with <slot>
Angular has been supporting Shadow Dom since the beginning. Until Angular 6.0, there were three-encapsulation modes
- Emulated
- Native
- None
Emulated was the default mode and Native mode was used to create Shadow Dom V.0. Starting with Angular 6.1, Angular started supporting Shadow Dom V.1. You can enable Shadow Dom V.1 on components using the fourth option ShadowDom. If you set encapsulation to ShadowDom, Angular creates Shadow Dom V.1. To do content projection in Angular Element, you need to have encapsulation set to ShadowDom.
Now on running the application, you will find 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 find this post useful. Thanks for reading. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 50+ Material-based Angular components to help you code web apps faster.