docs(portal): add overview example (#14655)

Adds a basic overview example for the `cdk/portal` package since it doesn't have any live examples.

Author: crisbeto

src/cdk/portal/portal.md

@@ -9,6 +9,8 @@ a `PortalOutlet`.
 Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are
 built upon.
 
+<!-- example(cdk-portal-overview) -->
+
 ##### `Portal<T>`
 | Method                      | Description                         |
 | --------------------------- | ----------------------------------- |

src/material-examples/cdk-portal-overview/cdk-portal-overview-example.css

@@ -0,0 +1,7 @@
+.example-portal-outlet {
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px dashed black;
+  width: 250px;
+  height: 250px;
+}

src/material-examples/cdk-portal-overview/cdk-portal-overview-example.html

@@ -0,0 +1,8 @@
+<h2>The portal outlet is below:</h2>
+<div class="example-portal-outlet">
+  <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
+</div>
+<ng-template #templatePortalContent>Hello, this is a template portal</ng-template>
+
+<button (click)="selectedPortal = componentPortal">Render component portal</button>
+<button (click)="selectedPortal = templatePortal">Render template portal</button>

src/material-examples/cdk-portal-overview/cdk-portal-overview-example.ts

@@ -0,0 +1,30 @@
+import {Component, AfterViewInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {ComponentPortal, Portal, TemplatePortal} from '@angular/cdk/portal';
+
+/**
+ * @title Portal overview
+ */
+@Component({
+  selector: 'cdk-portal-overview-example',
+  templateUrl: 'cdk-portal-overview-example.html',
+  styleUrls: ['cdk-portal-overview-example.css'],
+})
+export class CdkPortalOverviewExample implements AfterViewInit {
+  @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<any>;
+  selectedPortal: Portal<any>;
+  componentPortal: ComponentPortal<ComponentPortalExample>;
+  templatePortal: TemplatePortal<any>;
+
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  ngAfterViewInit() {
+    this.componentPortal = new ComponentPortal(ComponentPortalExample);
+    this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef);
+  }
+}
+
+@Component({
+  selector: 'component-portal-example',
+  template: 'Hello, this is a component portal'
+})
+export class ComponentPortalExample {}

src/material-examples/material-module.ts

@@ -5,6 +5,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {CdkTableModule} from '@angular/cdk/table';
 import {CdkTreeModule} from '@angular/cdk/tree';
 import {DragDropModule} from '@angular/cdk/drag-drop';
+import {PortalModule} from '@angular/cdk/portal';
 import {
   MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
   MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
@@ -57,6 +58,7 @@ import {
     MatTooltipModule,
     MatTreeModule,
     ScrollingModule,
+    PortalModule,
   ],
   exports: [
     A11yModule,
@@ -99,6 +101,7 @@ import {
     MatTooltipModule,
     MatTreeModule,
     ScrollingModule,
+    PortalModule,
   ]
 })
 export class ExampleMaterialModule {}