Angular Memo

ShortCut

@NgModule

Angularの中心的な構成を示すもの、おそらく、コア以外、沢山のモジュールで構成される。
機能が足りないときの拡張としても、この機能を利用できる。

• declarations: モジュール内利用する部品
• imports: 利用するモジュール（@NgModuleをつくクラス）
• exports: 他モジュールに提供する部品
• providers: モジュールのDIサービス
• bootstrap: root Componen

Modules

Components

• DOM
• Template
• @Component()

Template

• Event binding (event)="method(data)"

• Custom Eventについて

  // This component makes a request but it can't actually delete a hero.
  @Output deleteRequest = new EventEmitter<Hero>();
  
  delete() {
  this.deleteRequest.emit(this.hero);
  }
  

  利用側

  <custom-tag (deleteRequest)="method($event)"></custom-tag>
  
  method(hero) {
  
  }
  

• Property binding [attribute]="property"

• Custom Attributeについて

  @Input dataAttr: string
  

  利用側

  <custom-tag [dataAttr]="property"></custom-tag>
  

• Dudirect binding [(ngModel)]="property"

• Display {{property expression | directive1 expression | directive2 expression}}

• DOM Reference <tag #property></tag>

• *ngIf

• *ngFor

  <tag *ngFor="let item of items; let i = index"></tag>
  

• ngSwitch

  <div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
  </div>
  

Service

• Service with @Injectable

  @Injectable({
      providedIn: 'not root',
  })
  

  テストで役立つ？

• Component or Service

  constructor(
      private service1: ServiceFirstType,
      private service2: ServiceSecondType
  ) { }
  

• Regist

  @NgModule({
      providers: [
          ServiceFirstType,
          ServiceSecondType
      ]
  })
  
  @Component({
      selector: 'xxxxx',
      templateUrl: 'xxxxxx',
      providers: [
          ServiceFirstType,
          ServiceSecondType
      ]
  })
  

Form Control

• Reactive

  • Sample

    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms';
    
    @Component({
    selector: 'app-reactive-favorite-color',
    template: `
        Favorite Color: <input type="text" [formControl]="favoriteColorControl">
    `
    })
    export class FavoriteColorComponent {
    favoriteColorControl = new FormControl('');
    }
    

• Template-driven

  • sample

    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-template-favorite-color',
        template: `
        Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
        `
    })
    export class FavoriteColorComponent {
        favoriteColor = '';
    }