text: import * as i1 from '@angular/cdk/portal';
  import { ComponentPortal, TemplatePortal, DomPortal, PortalModule } from '@angular/cdk/portal';
  import * as i0 from '@angular/core';
  import { Component, ViewChild, NgModule } from '@angular/core';
  
  const _c0 = ["templatePortalContent"];
  const _c1 = ["domPortalContent"];
  function CdkPortalOverviewExample_ng_template_3_Template(rf, ctx) { }
  function CdkPortalOverviewExample_ng_template_4_Template(rf, ctx) { if (rf & 1) {
      i0.ɵɵtext(0, "Hello, this is a template portal");
  } }
  /**
   * @title Portal overview
   */
  class CdkPortalOverviewExample {
      constructor(_viewContainerRef) {
          this._viewContainerRef = _viewContainerRef;
      }
      ngAfterViewInit() {
          this.componentPortal = new ComponentPortal(ComponentPortalExample);
          this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef);
          this.domPortal = new DomPortal(this.domPortalContent);
      }
  }
  CdkPortalOverviewExample.ɵfac = function CdkPortalOverviewExample_Factory(t) { return new (t || CdkPortalOverviewExample)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
  CdkPortalOverviewExample.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CdkPortalOverviewExample, selectors: [["cdk-portal-overview-example"]], viewQuery: function CdkPortalOverviewExample_Query(rf, ctx) { if (rf & 1) {
          i0.ɵɵviewQuery(_c0, 5);
          i0.ɵɵviewQuery(_c1, 5);
      } if (rf & 2) {
          let _t;
          i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templatePortalContent = _t.first);
          i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.domPortalContent = _t.first);
      } }, decls: 15, vars: 1, consts: [[1, "example-portal-outlet"], [3, "cdkPortalOutlet"], ["templatePortalContent", ""], [3, "click"], ["domPortalContent", ""]], template: function CdkPortalOverviewExample_Template(rf, ctx) { if (rf & 1) {
          i0.ɵɵelementStart(0, "h2");
          i0.ɵɵtext(1, "The portal outlet is below:");
          i0.ɵɵelementEnd();
          i0.ɵɵelementStart(2, "div", 0);
          i0.ɵɵtemplate(3, CdkPortalOverviewExample_ng_template_3_Template, 0, 0, "ng-template", 1);
          i0.ɵɵelementEnd();
          i0.ɵɵtemplate(4, CdkPortalOverviewExample_ng_template_4_Template, 1, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
          i0.ɵɵelementStart(6, "button", 3);
          i0.ɵɵlistener("click", function CdkPortalOverviewExample_Template_button_click_6_listener() { return ctx.selectedPortal = ctx.componentPortal; });
          i0.ɵɵtext(7, "Render component portal");
          i0.ɵɵelementEnd();
          i0.ɵɵelementStart(8, "button", 3);
          i0.ɵɵlistener("click", function CdkPortalOverviewExample_Template_button_click_8_listener() { return ctx.selectedPortal = ctx.templatePortal; });
          i0.ɵɵtext(9, "Render template portal");
          i0.ɵɵelementEnd();
          i0.ɵɵelementStart(10, "button", 3);
          i0.ɵɵlistener("click", function CdkPortalOverviewExample_Template_button_click_10_listener() { return ctx.selectedPortal = ctx.domPortal; });
          i0.ɵɵtext(11, "Render DOM portal");
          i0.ɵɵelementEnd();
          i0.ɵɵelementStart(12, "div", null, 4);
          i0.ɵɵtext(14, "Hello, this is a DOM portal");
          i0.ɵɵelementEnd();
      } if (rf & 2) {
          i0.ɵɵadvance(3);
          i0.ɵɵproperty("cdkPortalOutlet", ctx.selectedPortal);
      } }, directives: [i1.CdkPortalOutlet], 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}"] });
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CdkPortalOverviewExample, [{
          type: Component,
          args: [{ selector: 'cdk-portal-overview-example', template: "<h2>The portal outlet is below:</h2>\n<div class=\"example-portal-outlet\">\n  <ng-template [cdkPortalOutlet]=\"selectedPortal\"></ng-template>\n</div>\n<ng-template #templatePortalContent>Hello, this is a template portal</ng-template>\n\n<button (click)=\"selectedPortal = componentPortal\">Render component portal</button>\n<button (click)=\"selectedPortal = templatePortal\">Render template portal</button>\n<button (click)=\"selectedPortal = domPortal\">Render DOM portal</button>\n\n<div #domPortalContent>Hello, this is a DOM portal</div>\n", styles: [".example-portal-outlet {\n  margin-bottom: 10px;\n  padding: 10px;\n  border: 1px dashed black;\n  width: 250px;\n  height: 250px;\n}\n"] }]
      }], function () { return [{ type: i0.ViewContainerRef }]; }, { templatePortalContent: [{
              type: ViewChild,
              args: ['templatePortalContent']
          }], domPortalContent: [{
              type: ViewChild,
              args: ['domPortalContent']
          }] }); })();
  class ComponentPortalExample {
  }
  ComponentPortalExample.ɵfac = function ComponentPortalExample_Factory(t) { return new (t || ComponentPortalExample)(); };
  ComponentPortalExample.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentPortalExample, selectors: [["component-portal-example"]], decls: 1, vars: 0, template: function ComponentPortalExample_Template(rf, ctx) { if (rf & 1) {
          i0.ɵɵtext(0, "Hello, this is a component portal");
      } }, encapsulation: 2 });
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentPortalExample, [{
          type: Component,
          args: [{
                  selector: 'component-portal-example',
                  template: 'Hello, this is a component portal'
              }]
      }], null, null); })();
  
  const EXAMPLES = [
      CdkPortalOverviewExample,
      ComponentPortalExample,
  ];
  class CdkPortalExamplesModule {
  }
  CdkPortalExamplesModule.ɵfac = function CdkPortalExamplesModule_Factory(t) { return new (t || CdkPortalExamplesModule)(); };
  CdkPortalExamplesModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CdkPortalExamplesModule });
  CdkPortalExamplesModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[PortalModule]] });
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CdkPortalExamplesModule, [{
          type: NgModule,
          args: [{
                  imports: [PortalModule],
                  declarations: EXAMPLES,
                  exports: EXAMPLES,
                  entryComponents: EXAMPLES,
              }]
      }], null, null); })();
  (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CdkPortalExamplesModule, { declarations: [CdkPortalOverviewExample,
          ComponentPortalExample], imports: [PortalModule], exports: [CdkPortalOverviewExample,
          ComponentPortalExample] }); })();
  
  /**
   * Generated bundle index. Do not edit.
   */
  
  export { CdkPortalExamplesModule, CdkPortalOverviewExample, ComponentPortalExample };
  //# sourceMappingURL=portal.js.map
  