====== Angular入門_はじめてのアプリ ====== [[https://angular.jp/start|Angular入門_はじめてのアプリ]] ===== *ngForディレクティブ =====


   // productsリストをproductという変数に当てはめる
  
    {{product.name}}

===== 補間構文 {{ }} =====


   // productsリストをproductという変数に当てはめる
  
    {{product.name}} // プロパティの値をテキストとしてレンダリングします

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


Products

  
     //"~"の部分はバインディングしている。
                                            // 文字列だけなら となる
    {{product.name}}

===== *ngIfディレクティブ =====


  
    Description:{{product.description}}

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

===== コンポーネントは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
  
　
　↓　

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

　↓

②product-list.component.html　// 子のHTML
  　//プロパティバインディング

===== 子コンポーネントからのイベントのリスニング@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

 // emit()メソッド呼び出し


　↓
product-list.component.html　// 親HTML
  
  
  ↓
  
④product-list.component.ts　// 親のクラス
export class ProductListComponent {
　...
  onNotify2() {　//onNotify2メソッド
    window.alert('You will be notified when the product goes on sale')
  }

{{product.name}}

{{product.name}} // プロパティの値をテキストとしてレンダリングします

Products

//"~"の部分はバインディングしている。 // 文字列だけなら となる {{product.name}}

//"~"の部分はバインディングしている。 // 文字列だけならとなる {{product.name}}