9728.6803b9e08f604944.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[9728],{9728:(v,m,p)=>{p.r(m),p.d(m,{CdkPortalExamplesModule:()=>P,CdkPortalOverviewExample:()=>d,ComponentPortalExample:()=>i});var r=p(4080),e=p(4650);const c=["templatePortalContent"],u=["domPortalContent"];function s(t,n){}function _(t,n){1&t&&e._uU(0,"Hello, this is a template portal")}let d=(()=>{class t{constructor(l){this._viewContainerRef=l}ngAfterViewInit(){this.componentPortal=new r.C5(i),this.templatePortal=new r.UE(this.templatePortalContent,this._viewContainerRef),this.domPortal=new r.Xp(this.domPortalContent)}}return t.\u0275fac=function(l){return new(l||t)(e.Y36(e.s_b))},t.\u0275cmp=e.Xpm({type:t,selectors:[["cdk-portal-overview-example"]],viewQuery:function(l,o){if(1&l&&(e.Gf(c,5),e.Gf(u,5)),2&l){let a;e.iGM(a=e.CRH())&&(o.templatePortalContent=a.first),e.iGM(a=e.CRH())&&(o.domPortalContent=a.first)}},decls:15,vars:1,consts:[[1,"example-portal-outlet"],[3,"cdkPortalOutlet"],["templatePortalContent",""],[3,"click"],["domPortalContent",""]],template:function(l,o){1&l&&(e.TgZ(0,"h2"),e._uU(1,"The portal outlet is below:"),e.qZA(),e.TgZ(2,"div",0),e.YNc(3,s,0,0,"ng-template",1),e.qZA(),e.YNc(4,_,1,0,"ng-template",null,2,e.W1O),e.TgZ(6,"button",3),e.NdJ("click",function(){return o.selectedPortal=o.componentPortal}),e._uU(7,"Render component portal"),e.qZA(),e.TgZ(8,"button",3),e.NdJ("click",function(){return o.selectedPortal=o.templatePortal}),e._uU(9,"Render template portal"),e.qZA(),e.TgZ(10,"button",3),e.NdJ("click",function(){return o.selectedPortal=o.domPortal}),e._uU(11,"Render DOM portal"),e.qZA(),e.TgZ(12,"div",null,4),e._uU(14,"Hello, this is a DOM portal"),e.qZA()),2&l&&(e.xp6(3),e.Q6J("cdkPortalOutlet",o.selectedPortal))},dependencies:[r.Pl],styles:[".example-portal-outlet[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n  padding: 10px;\n  border: 1px dashed black;\n  width: 250px;\n  height: 250px;\n}"]}),t})(),i=(()=>{class t{}return t.\u0275fac=function(l){return new(l||t)},t.\u0275cmp=e.Xpm({type:t,selectors:[["component-portal-example"]],decls:1,vars:0,template:function(l,o){1&l&&e._uU(0,"Hello, this is a component portal")},encapsulation:2}),t})(),P=(()=>{class t{}return t.\u0275fac=function(l){return new(l||t)},t.\u0275mod=e.oAB({type:t}),t.\u0275inj=e.cJS({imports:[r.eL]}),t})()}}]);