Angular入門_はじめてのアプリ

*ngForディレクティブ

<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
  <h3>
    {{product.name}}
  </h3>
</div>

補間構文 {{ }}

<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
  <h3>
    {{product.name}} // プロパティの値をテキストとしてレンダリングします
  </h3>
</div>

プロパティバインディング [] 構文

[]でhtmnlタグのプロパティをバインディングできる

<h2>Products</h2>
<div *ngFor="let product of products">
  <h3>
    <a [title]="product.name + ' details'"> //"~"の部分はバインディングしている。
                                            // 文字列だけなら<a [title]="'details'"> となる
    {{product.name}}
    </a>
  </h3>
</div>

*ngIfディレクティブ

  <p *ngIf="product.description">
    Description:{{product.description}}
  </p>

()イベントバインディング

  <button (click)="share()">
    share
  </button>

コンポーネントは3つの要素

* コンポーネントクラス …データやメソッド。product-list.component.ts

* HTMLテンプレート …UI。product-list.component.html

* コンポーネント固有スタイル …ルック・アンド・フィール(コンポーネントCSS)。product-list.component.css

コンポーネントのツリー

各Angularコンポーネントには特定の目的と責任がある。

xxx.component.tsの構成

import { Component, OnInit } from '@angular/core';
 
@Component({ // @Component()デコレーター...次のクラスがコンポーネントであることを示している。
  selector: 'app-product-alerts',　// Angularコンポーネントに付ける名前です。 
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
 
export class ProductAlertsComponent implements OnInit { // クラス
 
 　// @Inputデコレーター...プロパティ値がコンポーネントの親から渡される
　 @Input() product;　// プロパティ
  constructor() { }
 
  ngOnInit() {
  }
 
}

親から子コンポーネントへのデータの受け渡し@Input

①product-list.component.html　親のhtml
  <app-product-alerts 
  [product]="product" //ここで子のapp-product-alertsのproductプロパティを設定
  (notify1)="onNotify2()"
  >
　
　↓　

②product-alerts.component.ts　子のクラス
selector: 'app-product-alerts'　//Angureコンポーネントの名前
　…
export class ProductAlertsComponent implements OnInit {　//クラス名
  @Input() product; // インプットデコレーター付きのプロパティ
  constructor() { }

　↓

②product-list.component.html　// 子のHTML
  <app-product-alerts [product]="product">　//プロパティバインディング
  </app-product-alerts>

子コンポーネントからのイベントのリスニング@Output

①product-alerts.component.ts　// 子のクラス
import {Output,EventEmitter} from '@angular/core';
...
export class ProductAlertsComponent implements OnInit {
  @Input() product;
  @Output() notify1=new EventEmitter();　//notify1プロパティの変更でイベント発行できる
 
  ↓
②product-alerts.component.html // 子のHTML
<p *ngIf="product.price > 700">
<button (click)="notify1.emit()">Notify Me</button> // emit()メソッド呼び出し
</p>
 
　↓
product-list.component.html　// 親HTML
  <app-product-alerts 
  [product]="product"
  (notify1)="onNotify2()"　//子のnotify1プロパティの変更イベントで、親のonNotify2()メソッド呼び出し
  >
 
  ↓
 
④product-list.component.ts　// 親のクラス
export class ProductListComponent {
　...
  onNotify2() {　//onNotify2メソッド
    window.alert('You will be notified when the product goes on sale')
  }

目次