[S03E11] Angular CDK

Kevin · 2017年12月20日11:20

錄影檔

範例程式GitHub：

小抄：

gist.github.com

https://gist.github.com/wellwind/cd3f95517f4fb74d97346676a4a80876

angular-cdk-demo1220.md

## Overlay

```typescript
  chat(origin: MatButton, user: OnlineUser) {
    const strategy = this.overlay
      .position()
      .connectedTo(origin._elementRef, { originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'top' })
      // 備用方案
      .withFallbackPosition({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'bottom' });

This file has been truncated. show original

另一份內容比較多但還有點亂的小抄也順便附上：

gist.github.com

https://gist.github.com/wellwind/95218f7d976d6f20b181a33bf6ef730d

Overlay.md

```html
<ng-template #menu let-name="name" let-nickname="nickname">
  <mat-nav-list class="mat-elevation-z2 mat-menu-panel">
    <h3 matSubheader>Hi {{ name }} ({{ nickname }})</h3>
    <mat-divider></mat-divider>
    <a mat-list-item routerLink>Link</a>
    <a mat-list-item routerLink>Initially focused</a>
    <a mat-list-item routerLink>Focus region end</a>
    <a mat-list-item routerLink>Link</a>
  </mat-nav-list>

This file has been truncated. show original

Portal.md

```html
<h2> The portal outlet is here: </h2>
<div class="demo-portal-outlet">
  <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
</div>

<button type="button" (click)="selectedPortal = programmingJoke">
  Programming joke
</button>

This file has been truncated. show original

a11y.md

# Service

## InteractivityChecker 

```typescript
export class AppComponent implements OnInit, AfterContentInit {
  @ViewChild('button') button: ElementRef;

  constructor(private interactivityChecker: InteractivityChecker) {}

This file has been truncated. show original

There are more than three files. show original