Angular 8 - สร้าง Component ใน Component ไปอีก

สร้างปุ่ม Notify Me เป็นแล้วเรียกใช้ใน Product List โดยจะสร้างเป็น Component และมีการรับค่าด้วย

เริ่มด้วยการสร้าง Component ชื่อ product-alerts อย่าลืมใช้คำสั่ง ng generate component product-alerts
แล้วเพิ่มปุ่ม Notify Me ใน Template

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<p>
    <button>Notify Me</button>
</p>

และเพิ่ม product-alerts ใน product-list อีกที

<h1>{{title}}</h1>

<div *ngFor="let product of productList">
    <a [title]="'Description: ' + product.description">
        {{product.name}}
    </a>

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

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

    <app-product-alerts></app-product-alerts>
    
</div>

---

ต่อมาเราจะทำการประกาศ @Input() เพื่อให้ส่งค่าเข้าไปใน Component "product-alerts" ได้
แล้วกำหนดค่าที่จะส่งค่าให้ Component ใน Template อีกทีด้วยการ Attribute Binding [ ]
จากนั้นทดสอบด้วยการกำหนดว่าถ้า product.price > 700 จะให้แสดงปุ่ม

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  @Input() product;

  constructor() { }

  ngOnInit() {
  }

}

<p *ngIf="product.price > 700">
    <button>Notify Me</button>
</p>

<h1>{{title}}</h1>

<div *ngFor="let product of productList">
    <a [title]="'Description: ' + product.description">
        {{product.name}}
    </a>

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

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

    <app-product-alerts [product]="product" ></app-product-alerts>
    
</div>

เพิ่ม price ใน "products.ts"

export const products = [
    {
        name: 'Phone XL',
        description: 'A large phone with one of the best screen',
        price: 799
    },{
        name: 'Phone Mini',
        description: 'A great phone with one of the best cameras',
        price: 699
    },{
        name: 'Phone Standard',
        description: '',
        price: 299
    }
]

---

การแจ้งเตือนเมื่อทำการกด "product-alerts" แล้วไปเรียกใช้งาน Function ใน "product-list"
ให้เราทำการเพิ่ม Function onNotify() ที่ Component "product-list" ก่อน
แล้วทำการเพิ่ม Event Binding เมื่อมีการส่ง notify เข้ามาให้ไปทำงานที่ Function onNotify() แบบนี้ (notify)="onNotify()"

import { Component, OnInit } from '@angular/core';

import { products } from '../static/products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit {

  title = 'Product List';
  productList = products;

  share() {
    window.alert("The product has been shared!");
  }

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }

  constructor() { }

  ngOnInit() {
  }

}

<h1>{{title}}</h1>

<div *ngFor="let product of productList">
    <a [title]="'Description: ' + product.description">
        {{product.name}}
    </a>

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

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

    <app-product-alerts [product]="product" (notify)="onNotify()"></app-product-alerts>
    
</div>

ส่วนของ "product-alerts" เพิ่ม @Output ชื่อ notify เป็น EventEmitter เพื่อให้ส่งค่าออกมาได้
และ Event Binding เมื่อทำการ Click ให้เรียก notify.emit()

import { Component, OnInit } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

}

<p *ngIf="product.price > 700">
    <button (click)="notify.emit()">Notify Me</button>
</p>

---

ทำความเข้าใจพาทนี้ ถ้ามองการเชื่อมโยงกันระหว่าง Template ก็จะค่อนข้างเข้าใจยากเล็กน้อย แต่จริงๆ แล้วให้มองที่ตัว Type Script เป็นหลักจะทำความเข้าใจได้ง่ายกว่า
นึกว่า ไฟล์ .ts เป็น Function ย่อย ๆ ก็จะเห็นได้ชัดว่า "product-alerts.component.ts" จะมี Input และ Output ก็เหมือน Parameter และ Return เท่านั้น