เรามาดูวงจรชีวิต หรือ lifecycle ของ angular component กันครับ

component ใน angular นั้นจะมี lifecycle อยู่ ซึ่ง component แต่ละตัวจะผ่านเหตุการณ์ต่าง ๆ ของ lifecycle ตั้งแต่เริ่มต้นจนถึงการทำลาย

เราไปดู list สำคัญต่าง ๆ ใน lifecycle กันครับ

1. ngOnChanges() จะถูกเรียกเมื่อ one-way หรือ two-way component และ properties ถูก update ใช้เพื่อตอบสนองต่อการเปลี่ยนแปลงคุณสมบัติอินพุตของ component

2. ngOnInit() จะถูกเรียกเมื่อ component และ properties initialized ใช้เพื่อดำเนินการเริ่มต้นเพิ่มเติมสำหรับ component

3. ngDoCheck() จะถูกเรียกหลังจากทุกสิ่งการเปลี่ยนแปลง ใช้เพื่อทำการตรวจหาการเปลี่ยนแปลงที่กำหนดเองเพิ่มเติมสำหรับ component

4. ngAfterContentInit() จะถูกเรียกหลังจาก content initialized ใช้เพื่อดำเนินการเริ่มต้นเพิ่มเติมสำหรับเนื้อหาของ component

5. ngAfterContentChecked() จะถูกเรียกหลังจาก content checked ใช้เพื่อดำเนินการเริ่มต้นเพิ่มเติมสำหรับเนื้อหาของ component

6. ngAfterViewInit() จะถูกเรียกหลังจาก view initialized ใช้เพื่อทำงานเพิ่มเติมหลังจากตรวจสอบเนื้อหาของ component

7. ngAfterViewChecked() จะถูกเรียกหลังจาก view checked ใช้ในการทำงานเพิ่มเติมหลังจากตรวจสอบมุมมองของ component แล้ว

8. ngOnDestroy() จะถูกเรียกก่อนที่ component จะถูกทำลาย ใช้เพื่อดำเนินการล้างข้อมูลสำหรับคอมโพเนนต์ เช่น unsubscribing จาก observables หรือยกเลิก pending requests ต่าง ๆ

ดูรายละเอียดเพิ่มเติมได้ที่ https://angular.io/guide/lifecycle-hooks