{"id":815,"date":"2018-11-01T13:40:00","date_gmt":"2018-11-01T13:40:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=815"},"modified":"2025-02-21T07:02:35","modified_gmt":"2025-02-21T07:02:35","slug":"content-projection-in-angular","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/content-projection-in-angular","title":{"rendered":"Content Projection in Angular Element with Slot in Angular 7.0"},"content":{"rendered":"\n

In this article, we will learn how to project content in an Angular Element. As of now, you know that we use ng-content<\/strong> to carry out content projection as shown in the next listing:<\/p>\n\n\n\n

import\u00a0{\u00a0Component\u00a0}\u00a0from\u00a0'@angular\/core';\n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-greet',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`\n\u00a0<h2>{{title}}<\/h2>\n\u00a0<ng-content><\/ng-content>\n`\n})\nexport\u00a0class\u00a0GreetComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0title\u00a0=\u00a0'Greet';\n}<\/pre>\n\n\n\n
 You can also project content as shown in the next listing:<\/p>\n\n\n\n
<h1>Welcome\u00a0to\u00a0{{\u00a0title\u00a0}}!<\/h1>\n<app-greet>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Hello\u00a0Foo<\/h3>\n<\/app-greet><\/pre>\n\n\n\n
The challenge with the above approach is, \u201cIf you use GreetComponent as your Angular Element,<\/strong>\u201d you will not able to project content. To understand this better, let us start with converting GreetComponent to an Angular Element.\u00a0 Here you can learn Step by Step to Create Angular Element<\/a>.<\/p>\n\n\n\n
After converting GreetComponent as Angular Element, AppModule should look like the listing below:<\/p>\n\n\n\n
import\u00a0{\u00a0AppComponent\u00a0}\u00a0from\u00a0'.\/app.component';\nimport\u00a0{\u00a0GreetComponent\u00a0}\u00a0from\u00a0'.\/greet.component';\n \n@NgModule({\n\u00a0\u00a0\u00a0\u00a0declarations:\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AppComponent,\u00a0GreetComponent\n\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0imports:\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0BrowserModule\n\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0providers:\u00a0[],\n\u00a0\u00a0\u00a0\u00a0bootstrap:\u00a0[GreetComponent],\n\u00a0\u00a0\u00a0\u00a0entryComponents:\u00a0[GreetComponent]\n})\nexport\u00a0class\u00a0AppModule\u00a0{\n \n\u00a0\u00a0\u00a0\u00a0constructor(private\u00a0injector:\u00a0Injector)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const\u00a0customElement\u00a0=\u00a0createCustomElement(GreetComponent,\u00a0{\u00a0injector\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0customElements.define('app-root',\u00a0customElement);\n\u00a0\u00a0\u00a0\u00a0}\n \n\u00a0\u00a0\u00a0\u00a0ngDoBootstrap()\u00a0{\n \n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n
Now you can use GreetComponent on index.html as shown in the listing below:<\/p>\n\n\n\n
<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0<!--\u00a0<app-root><\/app-root>\u00a0-->\n\u00a0\u00a0\u00a0\u00a0\u00a0<app-greet>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>hey\u00a0Foo<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/app-greet>\n<\/body><\/pre>\n\n\n\n
Upon running the application, you will find that the <h2> element has not been projected to the Angular Element GreetComponent.<\/p>\n\n\n\n
\"<\/figure>\n\n\n\n
Starting with Angular 7, we have other option to do content projection slot. <\/strong>To do content projection in Angular Element, you have to do following:<\/p>\n\n\n\n
    \n
  1. Set ViewEnacpsulation to ShadowDom<\/li>\n\n\n\n
  2. Use slot instead of <ng-content><\/li>\n<\/ol>\n\n\n\n
    Let us modify GreetComponent as shown in the listing below:<\/p>\n\n\n\n
    import\u00a0{\u00a0Component,\u00a0ViewEncapsulation\u00a0}\u00a0from\u00a0'@angular\/core';\n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-greet',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`\n\u00a0<h2>{{title}}<\/h2>\n\u00a0<slot\u00a0name='message'><\/slot>\n`,\n\u00a0\u00a0\u00a0\u00a0encapsulation:\u00a0ViewEncapsulation.ShadowDom\n})\nexport\u00a0class\u00a0GreetComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0title\u00a0=\u00a0'Greet\u00a0Component';\n}<\/pre>\n\n\n\n
    We have set encapsulation to ShadowDom and replaced <ng-content> with <slot><\/p>\n\n\n\n
    Angular has been supporting Shadow Dom since the beginning. Until Angular 6.0, there were three-encapsulation modes<\/p>\n\n\n\n
      \n
    1. Emulated<\/li>\n\n\n\n
    2. Native<\/li>\n\n\n\n
    3. None<\/li>\n<\/ol>\n\n\n\n
      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.<\/p>\n\n\n\n
      Now on running the application, you will find content has been projected as shown in the image below:<\/p>\n\n\n\n
      \"<\/figure>\n\n\n\n
      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<\/a>, be sure to do so! They have 50+ Material-based Angular components to help you code web apps faster.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Learn about content projection in an Angular element with slot in Angular 7. <\/p>\n","protected":false},"author":65,"featured_media":1644,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=815"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/815\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/815\/revisions\/2115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1644"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}