In this article, we will learn how to project content in an Angular Element. If you are already not familiar about,
- Shadow Dom
- ViewEncapsulation
- Content Projection
I recommend you to read below articles before moving forward,
As of now, you know that, we use ng-content to do 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 project content as shown in the next listing:
<h1> Welcome to {{ title }}! </h1><app-greet> <h3>Hello Foo</h3></app-greet>
Challenge with above approach is, “If you use GreetComponent as Angular Element” then you will not able to project content. To understand it better, let us start with converting GreetComponent as Angular Element. Here you can Learn Step by Step tp Create Angular Element.
After converting GreetComponent as Angular Element, AppModule should look like 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>
On running application, you will find that <h2> element has not been projected to the Angular Element GreetComponent.
Starting 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 beginning. Until Angular 6.0, there were three-encapsulation modes
- Emulated
- Native
- None
Emulated was default mode and Native mode was to create Shadow Dom V.0. Starting Angular 6.1 , Angular has started supporting Shadow Dom V.1 also. You can enable Shadow Dom V.1 on components using 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.