lacolaco

<div *ngFor="let user of (users$ | async) as users; index as i">
  <span>{{ i + 1 }} / users.length</span>
  <span>{{ user.name }}</span>
</div>

lacolaco

<div *ngIf="user$ | async as user; else userNotFound"> 
  <p>{{ user.name }}</p> 
  <p>{{ user.age }}</p> 
  <img [src]="user.icon"> 
</div> 
<ng-template #userNotFound> 
  <p>not found</p> 
</ng-template>

lacolaco

<div *ngIf="user$ | async as user"> 
  <p>{{ user.name }}</p> 
  <p>{{ user.age }}</p> 
  <img [src]="user.icon"> 
</div>

lacolaco

<div *ngIf="show; then thenBlock; else elseBlock"></div> 
<ng-template #thenBlock>show === true</ng-template>
<ng-template #elseBlock>show === false</ng-template>

lacolaco

<div *ngIf="show; else elseBlock">show === true</div> 
<ng-template #elseBlock>show === false</ng-template>

lacolaco

@Component({ 
  selector: 'ng-if-then', 
  template: ` 
    <button (click)="switchPrimary()">Switch Template</button> 
    <div *ngIf="show; then thenBlock"></div> 
    <ng-template #primaryBlock>Primary</ng-template> 
    <ng-template #secondaryBlock>Secondary</ng-template> 
  `
}) 
class NgIfThenElse implements OnInit { 

lacolaco

<div *ngIf="show; then thenBlock">ignored</div>
<ng-template #thenBlock>show === true</ng-template> 

lacolaco

export class AwesomeCounter extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.state = {};
    }
  
    connectedCallback() {
        this.setState({count: 0});

lacolaco

オブジェクト指向プログラミング

• プログラミングの抽象化に関する精神論
• 厳密な定義はない
• いくつかの抽象化の手法をグループ化して名前をつけてあるだけ

カプセル化: Encapusulation

• ソースコードのフレキシビリティを高めるためのソースコードのデザイン
  • いいデザインにはセンスが必要
  • 鍛える
• フレキシビリティ

lacolaco

@Component({})
class SomeCmp {
  containerElement: HTMLElement;
  
  constructor(private router: Router) {}

  ngOnInit() {
    // insert HTML to DOM
    containerElement.innerHTML = `<a href="/foo">Link</a>`
    // query anchors