{"id":81406,"date":"2024-11-25T09:29:10","date_gmt":"2024-11-25T02:29:10","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=81406"},"modified":"2024-11-25T09:29:10","modified_gmt":"2024-11-25T02:29:10","slug":"angular-lifecycle-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/","title":{"rendered":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#Dinh_nghia_ve_Angular_Lifecycle_Hook\" >\u0110\u1ecbnh ngh\u0129a v\u1ec1 Angular Lifecycle Hook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#Tai_sao_nen_su_dung_Angular_Lifecycle_Hook\" >T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Angular Lifecycle Hook?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#Tong_quan_8_Angular_Lifecycle_Hook\" >T\u1ed5ng quan 8 Angular\u00a0Lifecycle Hook\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#Cau_hoi_thuong_gap_ve_Angular_lifecycle_hook\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Angular lifecycle hook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#Tong_ket_ve_Angular_lifecycle_hook\" >T\u1ed5ng k\u1ebft v\u1ec1 Angular lifecycle hook<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Directives v\u00e0 components c\u00f3 Angular lifecycle khi Angular \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt ho\u1eb7c ph\u00e1 h\u1ee7y ch\u00fang. Developer c\u00f3 th\u1ec3 khai th\u00e1c v\u00f2ng \u0111\u1eddi b\u1eb1ng c\u00e1ch tri\u1ec3n khai m\u1ed9t ho\u1eb7c nhi\u1ec1u giao di\u1ec7n Angular lifecycle hook trong th\u01b0 vi\u1ec7n l\u00f5i (core library) c\u1ee7a Angular.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a v\u1ec1 Angular lifecycle v\u00e0 t\u1ea1i sao ch\u00fang l\u1ea1i quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh l\u1eadp tr\u00ecnh Angular<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 Lifecycle Hook ph\u1ed5 bi\u1ebfn trong Angular lifecycle<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Angular lifecycle hook<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Dinh_nghia_ve_Angular_Lifecycle_Hook\"><\/span><b> \u0110\u1ecbnh ngh\u0129a v\u1ec1 Angular Lifecycle Hook<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular lifecycle hook l\u00e0 m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c giai \u0111o\u1ea1n c\u1ee5 th\u1ec3 trong v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t components (th\u00e0nh ph\u1ea7n) ho\u1eb7c directives (ch\u1ec9 th\u1ecb) Angular. Angular Lifecycle Hook b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c kh\u1edfi t\u1ea1o th\u00e0nh ph\u1ea7n g\u1ed1c c\u1ee7a \u1ee9ng d\u1ee5ng, ti\u1ebfp theo t\u1ea1o v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c th\u00e0nh ph\u1ea7n con, r\u1ed3i \u0111\u1ebfn c\u00e1c th\u00e0nh ph\u1ea7n con ho\u1eb7c directives t\u01b0\u01a1ng \u1ee9ng c\u1ee7a ch\u00fang.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong Angular, components \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh m\u1ed9t c\u1ea5u tr\u00fac c\u00e2y (tree structure). Sau khi \u1ee9ng d\u1ee5ng t\u1ea3i t\u1ea5t c\u1ea3 components n\u00e0y, Angular s\u1ebd kh\u1edfi t\u1ea1o quy tr\u00ecnh hi\u1ec3n th\u1ecb \u1edf ch\u1ebf \u0111\u1ed9 xem (view). \u0110\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y, Angular c\u1ea7n ki\u1ec3m tra v\u00e0 x\u00e1c minh c\u00e1c thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n \u1ee9ng d\u1ee5ng, hi\u1ec3n th\u1ecb n\u1ed9i dung \u0111\u01b0\u1ee3c chi\u1ebfu c\u1ee7a \u1ee9ng d\u1ee5ng, xem x\u00e9t v\u00e0 \u0111\u00e1nh gi\u00e1 bi\u1ec3u th\u1ee9c, t\u00ednh r\u00e0ng bu\u1ed9c c\u1ee7a d\u1eef li\u1ec7u,&#8230; Ngo\u00e0i ra, Angular c\u0169ng x\u00f3a c\u00e1c components kh\u00f4ng c\u1ea7n thi\u1ebft kh\u1ecfi DOM.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular th\u1ef1c hi\u1ec7n c\u00e1c qu\u00e1 tr\u00ecnh n\u00e0y \u0111\u1ec3 gi\u00fap \u1ee9ng d\u1ee5ng ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 v\u00e0 lifecycle hook c\u1ee7a Angular components ch\u1ecbu tr\u00e1ch nhi\u1ec7m th\u1ef1c hi\u1ec7n quy tr\u00ecnh n\u00e0y. <\/span><span style=\"font-weight: 400;\">Angular lifecycle hook c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 h\u00e0m g\u1ecdi l\u1ea1i (callback functions), khi c\u00e1c lo\u1ea1i s\u1ef1 ki\u1ec7n c\u1ee5 th\u1ec3 x\u1ea3y ra trong v\u00f2ng \u0111\u1eddi c\u1ee7a components, c\u1ee5 th\u1ec3 nh\u01b0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">ngOnChanges trong Angular \u0111\u01b0\u1ee3c g\u1ecdi khi ai \u0111\u00f3 thay \u0111\u1ed5i thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o c\u1ee7a components.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi Angular kh\u1edfi t\u1ea1o components l\u1ea7n \u0111\u1ea7u ti\u00ean, n\u00f3 s\u1ebd th\u1ef1c thi ngOnlnit hook.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Angular g\u1ecdi hook ngOnDestroy khi n\u00f3 h\u1ee7y b\u1ea5t k\u1ef3 components n\u00e0o.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, Angular c\u0169ng s\u1eed d\u1ee5ng th\u00eam m\u1ed9t s\u1ed1 hook kh\u00e1c trong v\u00f2ng \u0111\u1eddi components \u0111\u1ec3 th\u1ef1c thi quy tr\u00ecnh.\u00a0<\/span><\/p>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/angular-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Angular l\u00e0 g\u00ec? C\u00f3 ph\u1ea3i l\u00e0 v\u0169 kh\u00ed h\u1ea1ng n\u1eb7ng c\u1ee7a Front-end Developer?<\/strong><\/a><\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Tai_sao_nen_su_dung_Angular_Lifecycle_Hook\"><\/span><b>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Angular Lifecycle Hook?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular lifecycle hook Hook cung c\u1ea5p nh\u1eefng c\u00e1ch th\u1ee9c t\u1ed5 ch\u1ee9c r\u00f5 r\u00e0ng \u0111\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi m\u1ed9t components trong su\u1ed1t v\u00f2ng \u0111\u1eddi c\u1ee7a n\u00f3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ch\u00fang cung c\u1ea5p c\u00e1c giai \u0111o\u1ea1n c\u00f3 c\u1ea5u tr\u00fac, trong \u0111\u00f3 c\u00e1c lo\u1ea1i h\u00e0nh \u0111\u1ed9ng c\u1ee5 th\u1ec3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, gi\u00fap qu\u1ea3n l\u00fd t\u00e0i nguy\u00ean, x\u1eed l\u00fd d\u1eef li\u1ec7u m\u1ed9t c\u00e1ch ch\u1ee7 \u0111\u1ed9ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ed3ng th\u1eddi, ph\u1ea3n h\u1ed3i c\u00e1c thay \u0111\u1ed5i trong v\u00f2ng \u0111\u1eddi m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_quan_8_Angular_Lifecycle_Hook\"><\/span><b>T\u1ed5ng quan 8 <\/b><b>Angular\u00a0<\/b><b>Lifecycle Hook\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular c\u00f3 nhi\u1ec1u lifecycle hook cho ph\u00e9p b\u1ea1n inject code v\u00e0o th\u1eddi \u0111i\u1ec3m ch\u00ednh x\u00e1c trong v\u00f2ng \u0111\u1eddi c\u1ee7a components ho\u1eb7c directives. Nh\u1eefng hook n\u00e0y ho\u1ea1t \u0111\u1ed9ng t\u01b0\u01a1ng t\u1ef1 nh\u01b0 \u0111i\u1ec3m ki\u1ec3m tra, cho ph\u00e9p b\u1ea1n th\u1ef1c hi\u1ec7n t\u00e1c v\u1ee5 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh d\u1ef1a tr\u00ean tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i c\u1ee7a components.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong Angular, c\u00f3 8 lifecycle hook nh\u01b0 sau:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Lifecycle Hook<\/b><\/td>\n<td><b>C\u00f4ng d\u1ee5ng<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngOnChanges<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c g\u1ecdi khi m\u1ed9t thu\u1ed9c t\u00ednh @Input() c\u00f3 s\u1ef1 thay \u0111\u1ed5i gi\u00e1 tr\u1ecb.\u0110\u01b0\u1ee3c g\u1ecdi tr\u01b0\u1edbc ngOnlnit v\u00e0 b\u1ea5t c\u1ee9 khi n\u00e0o m\u1ed9t ho\u1eb7c nhi\u1ec1u thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o li\u00ean k\u1ebft d\u1eef li\u1ec7u thay \u0111\u1ed5i.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngOnlnit:\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n, sau ngOnChanges. Kh\u1edfi t\u1ea1o directives ho\u1eb7c component sau khi Angular hi\u1ec3n th\u1ecb c\u00e1c thu\u1ed9c t\u00ednh li\u00ean k\u1ebft d\u1eef li\u1ec7u v\u00e0 thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o cho directive\/component.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngDoCheck<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u00e1t hi\u1ec7n v\u00e0 h\u00e0nh \u0111\u1ed9ng d\u1ef1a tr\u00ean nh\u1eefng thay \u0111\u1ed5i m\u00e0 Angular kh\u00f4ng th\u1ec3 ho\u1eb7c kh\u00f4ng mu\u1ed1n t\u1ef1 ph\u00e1t hi\u1ec7n. \u0110\u01b0\u1ee3c g\u1ecdi trong m\u1ed7i l\u1ea7n ch\u1ea1y quy tr\u00ecnh ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i, ngay sau ngOnChanges v\u00e0 ngOnlnit<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngAfterContentlnit<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ea3n h\u1ed3i sau khi Angular ch\u00e8n (ngay t\u1eeb l\u1ea7n \u0111\u1ea7u) n\u1ed9i dung v\u00e0o component (ph\u1ea7n n\u1ed9i dung trong &lt;ng-content&gt;). \u0110\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n sau ngDoCheck \u0111\u1ea7u ti\u00ean v\u00e0 hook n\u00e0y ch\u1ec9 d\u00e0nh cho component<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngAfterContentChecked<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ea3n h\u1ed3i sau khi Angular ki\u1ec3m tra n\u1ed9i dung \u0111\u01b0\u1ee3c chi\u1ebfu v\u00e0o component. \u0110\u01b0\u1ee3c g\u1ecdi sau ngAfterContentlnit v\u00e0 m\u1ecdi ngDoCheck ti\u1ebfp theo, hook ch\u1ec9 d\u00e0nh cho component.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngAfterViewlnit<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ea3n h\u1ed3i sau khi Angular kh\u1edfi t\u1ea1o c\u00e1c ch\u1ebf \u0111\u1ed9 xem component v\u00e0 ch\u1ebf \u0111\u1ed9 xem (view). \u0110\u01b0\u1ee3c g\u1ecdi m\u1ed9t l\u1ea7n sau ngAfterContentChecked \u0111\u1ea7u ti\u00ean v\u00e0 l\u00e0 hook ch\u1ec9 s\u1eed d\u1ee5ng cho component. Hook n\u00e0y ch\u1ec9 ch\u1ea1y m\u1ed9t l\u1ea7n v\u00e0 th\u00edch h\u1ee3p \u0111\u1ec3 thao t\u00e1c tr\u00ean c\u00e1c view con.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngAfterViewChecked<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ea3n h\u1ed3i sau khi Angular ki\u1ec3m tra c\u00e1c ch\u1ebf \u0111\u1ed9 xem component v\u00e0 ch\u1ebf \u0111\u1ed9 xem. \u0110\u01b0\u1ee3c g\u1ecdi sau ngAfterViewlnit v\u00e0 ngAfterContentChecked ti\u1ebfp theo, c\u0169ng l\u00e0 hook ch\u1ec9 s\u1eed d\u1ee5ng cho component.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">ngOnDestroy<\/span><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecdn d\u1eb9p d\u1eef li\u1ec7u ngay tr\u01b0\u1edbc khi Angular h\u1ee7y directive\/component. H\u1ee7y \u0111\u0103ng k\u00fd Observables v\u00e0 t\u00e1ch tr\u00ecnh x\u1eed l\u00fd d\u1eef li\u1ec7u \u0111\u1ec3 tr\u00e1nh r\u00f2 r\u1ec9 b\u1ed9 nh\u1edb. \u0110\u01b0\u1ee3c g\u1ecdi ngay tr\u01b0\u1edbc khi Angular h\u1ee7y directive ho\u1eb7c component<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">T\u00ecm hi\u1ec3u chi ti\u1ebft h\u01a1n c\u00e1c Angular lifecycle hook ngay sau \u0111\u00e2y:<\/span><\/p>\n<h3><b>ngOnChanges<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngOnChanges \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t khi c\u00f3 s\u1ef1 thay \u0111\u1ed5i c\u1ee7a c\u00e1c gi\u00e1 tr\u1ecb @Input \u0111\u01b0\u1ee3c r\u00e0ng bu\u1ed9c. D\u1eef li\u1ec7u b\u1ecb r\u00e0ng bu\u1ed9c b\u1edfi @Input() \u0111\u1ebfn t\u1eeb m\u1ed9t ngu\u1ed3n b\u00ean ngo\u00e0i. Khi ngu\u1ed3n b\u00ean ngo\u00e0i thay \u0111\u1ed5i d\u1eef li\u1ec7u \u0111\u00f3 theo c\u00e1ch c\u00f3 th\u1ec3 ph\u00e1t hi\u1ec7n \u0111\u01b0\u1ee3c, n\u00f3 s\u1ebd \u0111i qua thu\u1ed9c t\u00ednh @Input m\u1ed9t l\u1ea7n n\u1eefa.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Khi ngOnChanges \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t, n\u00f3 c\u0169ng k\u00edch ho\u1ea1t kh\u1edfi t\u1ea1o d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o. Hook nh\u1eadn \u0111\u01b0\u1ee3c m\u1ed9t tham s\u1ed1 b\u1eaft bu\u1ed9c c\u00f3 ki\u1ec3u SimpleChanges, gi\u00e1 tr\u1ecb n\u00e0y ch\u1ee9a th\u00f4ng tin v\u1ec1 c\u00e1c thu\u1ed9c t\u00ednh @Input \u0111\u00e3 thay \u0111\u1ed5i, bao g\u1ed3m gi\u00e1 tr\u1ecb c\u0169 (previousValue), gi\u00e1 tr\u1ecb m\u1edbi (currentValue) v\u00e0 flag firstChange.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, Input, OnChanges, SimpleChanges } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-child',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h3&gt;Child Component&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;TICKS: {{ lifecycleTicks }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;DATA: {{ data }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class ChildComponent implements OnChanges {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@Input() data: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0lifecycleTicks: number = 0;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngOnChanges(changes: SimpleChanges) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.lifecycleTicks++;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0console.log('Previous value:', changes['data'].previousValue);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0console.log('Current value:', changes['data'].currentValue);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0console.log('First change:', changes['data'].firstChange);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-parent',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngOnChanges Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-child [data]=\"arbitraryData\"&gt;&lt;\/app-child&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export class ParentComponent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0arbitraryData: string = 'initial';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0setTimeout(() =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.arbitraryData = 'final';<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}, 5000);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, ParentComponent li\u00ean k\u1ebft d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o v\u1edbi ChildComponent, th\u00e0nh ph\u1ea7n nh\u1eadn d\u1eef li\u1ec7u n\u00e0y th\u00f4ng qua thu\u1ed9c t\u00ednh @Input. Khi ngOnChanges k\u00edch ho\u1ea1t, sau 5 gi\u00e2y, l\u1ec7nh g\u1ecdi l\u1ea1i setTimeout k\u00edch ho\u1ea1t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L\u00fac n\u00e0y, ParentComponet s\u1ebd thay \u0111\u1ed5i ngu\u1ed3n d\u1eef li\u1ec7u c\u1ee7a thu\u1ed9c t\u00ednh input-bound c\u1ee7a ChildComponent. D\u1eef li\u1ec7u m\u1edbi \u0111i qua thu\u1ed9c t\u00ednh \u0111\u1ea7u v\u00e0o khi\u1ebfn cho ngOnChanges k\u00edch ho\u1ea1t m\u1ed9t l\u1ea7n n\u1eefa.\u00a0<\/span><\/p>\n<h3><b>ngOnlnit<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngOnlnit k\u00edch ho\u1ea1t m\u1ed9t l\u1ea7n khi kh\u1edfi t\u1ea1o thu\u1ed9c t\u00ednh input-bound (@Input) c\u1ee7a components. \u1ede v\u00ed d\u1ee5 ti\u1ebfp theo, hook kh\u00f4ng k\u00edch ho\u1ea1t khi ChildComponent nh\u1eadn d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o, thay v\u00e0o \u0111\u00f3 n\u00f3 s\u1ebd k\u00edch ho\u1ea1t ngay sau khi d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t th\u00e0nh ChildComponent.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, Input, OnInit } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-child',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h3&gt;Child Component&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;TICKS: {{ lifecycleTicks }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;DATA: {{ data }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class ChildComponent implements OnInit {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@Input() data: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0lifecycleTicks: number = 0;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngOnInit() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.lifecycleTicks++;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-parent',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngOnInit Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-child [data]=\"arbitraryData\"&gt;&lt;\/app-child&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class ParentComponent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0arbitraryData: string = 'initial';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0setTimeout(() =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.arbitraryData = 'final';<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}, 5000);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 n\u00e0y, ParentComponent li\u00ean k\u1ebft d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o v\u1edbi ChildComponent v\u00e0 thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd nh\u1eadn d\u1eef li\u1ec7u th\u00f4ng qua thu\u1ed9c t\u00ednh @Input. D\u1eef li\u1ec7u \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb th\u00e0nh ngOnlnit v\u00e0 b\u1eaft \u0111\u1ea7u k\u00edch ho\u1ea1t, sau 5 gi\u00e2y l\u1ec7nh g\u1ecdi setTimeout s\u1ebd \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t. ParentComponent thay \u0111\u1ed5i ngu\u1ed3n d\u1eef li\u1ec7u\u00a0 c\u1ee7a thu\u1ed9c t\u00ednh input-bound c\u1ee7a ChildComponent.<\/span><\/p>\n<h3><b>ngDoCheck<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngDoCheck \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t v\u1edbi m\u1ecdi chu k\u1ef3 ph\u00e1t hi\u1ec7n s\u1ef1 thay \u0111\u1ed5i. Angular ch\u1ea1y qu\u00e1 tr\u00ecnh ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i th\u01b0\u1eddng xuy\u00ean, khi th\u1ef1c hi\u1ec7n b\u1ea5t k\u1ef3 h\u00e0nh \u0111\u1ed9ng n\u00e0o c\u0169ng s\u1ebd khi\u1ebfn n\u00f3 ch\u1ea1y theo chu k\u1ef3 v\u00e0 ngDoCheck s\u1ebd k\u00edch ho\u1ea1t v\u1edbi c\u00e1c chu k\u1ef3 n\u00e0y. Do \u0111\u00f3, h\u00e3y c\u1ea9n th\u1eadn khi s\u1eed d\u1ee5ng ngDoCheck b\u1edfi v\u00ec ch\u00fang c\u00f3 th\u1ec3 t\u1ea1o ra c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t khi tri\u1ec3n khai kh\u00f4ng \u0111\u00fang c\u00e1ch.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, ngDoCheck cho ph\u00e9p developers ki\u1ec3m tra d\u1eef li\u1ec7u c\u1ee7a h\u1ecd theo c\u00e1ch th\u1ee7 c\u00f4ng, h\u1ecd c\u00f3 th\u1ec3 k\u00edch ho\u1ea1t ng\u00e0y s\u1eed d\u1ee5ng \u1ee9ng d\u1ee5ng m\u1edbi theo \u0111i\u1ec1u ki\u1ec7n. K\u1ebft h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh ChangeDetectorRef s\u1ebd gi\u00fap developers c\u00f3 th\u1ec3 t\u1ea1o ra c\u00e1ch ki\u1ec3m tra ri\u00eang c\u1ee7a h\u1ecd \u0111\u1ec3 ph\u00e1t hi\u1ec7n s\u1ef1 thay \u0111\u1ed5i trong \u1ee9ng d\u1ee5ng.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 n\u01a1i developers c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n ki\u1ec3m tra thay \u0111\u1ed5i t\u00f9y ch\u1ec9nh, \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch cho nh\u1eefng thay \u0111\u1ed5i m\u00e0 Angular kh\u00f4ng th\u1ec3 t\u1ef1 ph\u00e1t hi\u1ec7n \u0111\u01b0\u1ee3c (nh\u01b0 thay \u0111\u1ed5i b\u00ean trong objects ho\u1eb7c arrays).<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, DoCheck, ChangeDetectorRef } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-example',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h1&gt;ngDoCheck Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;Lifecycle Ticks: {{ lifecycleTicks }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;Current Data: {{ data[data.length - 1] }}&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class ExampleComponent implements DoCheck {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0lifecycleTicks: number = 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0oldTheData: string;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0data: string[] = ['initial'];<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(private changeDetector: ChangeDetectorRef) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.changeDetector.detach(); \/\/ lets the class perform its own change detection<\/span>\r\n<span style=\"font-weight: 400;\">\r\n \u00a0\u00a0\u00a0setTimeout(() =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.oldTheData = 'final'; \/\/ intentional error<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.data.push('intermediate');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}, 3000);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0setTimeout(() =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.data.push('final');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.changeDetector.markForCheck();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}, 6000);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0ngDoCheck() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0console.log(++this.lifecycleTicks);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0if (this.data[this.data.length - 1] !== this.oldTheData) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.changeDetector.detectChanges();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, l\u1edbp constructor s\u1ebd kh\u1edfi t\u1ea1o setTimeout 2 l\u1ea7n, sau ba gi\u00e2y, setTimeout \u0111\u1ea7u ti\u00ean k\u00edch ho\u1ea1t ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i. ngDoCheck \u0111\u00e1nh d\u1ea5u m\u00e0n h\u00ecnh \u0111\u1ec3 c\u1eadp nh\u1eadt. Ba gi\u00e2y sau, setTimeout th\u1ee9 hai s\u1ebd k\u00edch ho\u1ea1t v\u00e0 kh\u00f4ng c\u1ea7n c\u1eadp nh\u1eadt ch\u1ebf \u0111\u1ed9 xem (view) \u0111\u1ec3 ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i.\u00a0<\/span><\/p>\n<h3><b>ngAfterContentlnit<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngAfterContentlnit s\u1ebd \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t sau khi n\u1ed9i dung DOM c\u1ee7a components kh\u1edfi t\u1ea1o (t\u1ea3i l\u1ea7n \u0111\u1ea7u ti\u00ean). Ch\u1edd truy v\u1ea5n @ContentChild(ren) l\u00e0 tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng ch\u00ednh c\u1ee7a hook.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Truy v\u1ea5n @ContentChild(ren) t\u1ea1o ra c\u00e1c tham chi\u1ebfu ph\u1ea7n t\u1eed cho n\u1ed9i dung c\u1ee7a DOM. Do \u0111\u00f3, ch\u00fang s\u1ebd kh\u00f4ng kh\u1ea3 d\u1ee5ng cho \u0111\u1ebfn khi n\u1ed9i dung DOM \u0111\u01b0\u1ee3c t\u1ea3i. \u0110\u00f3 c\u0169ng l\u00e0 l\u00fd do t\u1ea1i sao ngAfterContentlnit v\u00e0 thu\u1ed9c t\u00ednh t\u01b0\u01a1ng t\u1ef1 ngAfterContentChecked \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hook n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi c\u1ea7n truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c truy v\u1ea5n b\u1edfi @ContentChild ho\u1eb7c @ContentChildren.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, ContentChild, AfterContentInit, ElementRef, Renderer2 } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-c',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am C.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Hello World!&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class CComponent { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-b',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am B.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;ng-content&gt;&lt;\/ng-content&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class BComponent implements AfterContentInit {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ContentChild(\"BHeader\", { read: ElementRef }) hRef: ElementRef;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(private renderer: Renderer2) { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngAfterContentInit() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.hRef.nativeElement, 'background-color', 'yellow')<\/span>\r\n<span style=\"font-weight: 400;\">\r\n \u00a0\u00a0\u00a0this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', 'pink');<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', 'red');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-a',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngAfterContentInit Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am A.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h3 #BHeader&gt;BComponent Content DOM&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;app-c&gt;&lt;\/app-c&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AComponent { }<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Qu\u00e1 tr\u00ecnh render b\u1eaft \u0111\u1ea7u b\u1eb1ng AComponent. \u0110\u1ec3 ho\u00e0n t\u1ea5t quy tr\u00ecnh, AComponent ph\u1ea3i render BComponent, BComponent chi\u1ebfu n\u1ed9i dung \u0111\u01b0\u1ee3c l\u1ed3ng trong ph\u1ea7n t\u1eed c\u1ee7a n\u00f3 th\u00f4ng qua ph\u1ea7n t\u1eed &lt;ng-content&gt;&lt;\/ng-content&gt;. CComponet l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a n\u1ed9i dung \u0111\u01b0\u1ee3c chi\u1ebfu, n\u1ed9i dung \u0111\u01b0\u1ee3c chi\u1ebfu ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh render.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ngAfterContentlnit k\u00edch ho\u1ea1t v\u00e0 BComponent ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh render. Cho \u0111\u1ebfn khi AComponent ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh render, ngAfterContentlnit s\u1ebd kh\u00f4ng k\u00edch ho\u1ea1t l\u1ea1i n\u1eefa.<\/span><\/p>\n<h3><b>ngAfterContentChecked<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngAfterContentChecked k\u00edch ho\u1ea1t sau m\u1ed7i chu k\u1ef3 ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i c\u1ee7a projected content (n\u1ed9i dung \u0111\u01b0\u1ee3c truy\u1ec1n v\u00e0o th\u00f4ng qua ng-content). \u0110i\u1ec1u n\u00e0y cho ph\u00e9p c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n t\u1ea1o \u0111i\u1ec1u ki\u1ec7n thu\u1eadn l\u1ee3i cho n\u1ed9i dung DOM ph\u1ea3n \u1ee9ng v\u1edbi s\u1ef1 thay \u0111\u1ed5i trong \u1ee9ng d\u1ee5ng.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ngAfterContentChecked c\u00f3 th\u1ec3 k\u00edch ho\u1ea1t th\u01b0\u1eddng xuy\u00ean v\u00e0 g\u00e2y ra v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t n\u1ebfu tri\u1ec3n khai k\u00e9m. ngAfterContentChecked c\u0169ng k\u00edch ho\u1ea1t trong giai \u0111o\u1ea1n kh\u1edfi t\u1ea1o c\u1ee7a components. N\u00f3 xu\u1ea5t hi\u1ec7n ngay sau ngAfterContentlnit.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, ContentChild, AfterContentChecked, ElementRef, Renderer2 } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-c',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am C.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Hello World!&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class CComponent { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-b',<\/span>\r\n<span style=\"font-weight: 400;\">  template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am B.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;button (click)=\"$event\"&gt;CLICK&lt;\/button&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;ng-content&gt;&lt;\/ng-content&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class BComponent implements AfterContentChecked {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ContentChild(\"BHeader\", { read: ElementRef }) hRef: ElementRef;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(private renderer: Renderer2) { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0randomRGB(): string {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return `rgb(${Math.floor(Math.random() * 256)},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0${Math.floor(Math.random() * 256)},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0${Math.floor(Math.random() * 256)})`;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngAfterContentChecked() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.hRef.nativeElement, 'background-color', this.randomRGB());<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', this.randomRGB());<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', this.randomRGB());<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-a',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngAfterContentChecked Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am A.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h3 #BHeader&gt;BComponent Content DOM&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;app-c&gt;&lt;\/app-c&gt;<\/span>\r\n<span style=\"font-weight: 400;\">  &lt;\/app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AComponent { }<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Quy tr\u00ecnh c\u1ee7a ngAfterContentChecked h\u1ea7u nh\u01b0 kh\u00f4ng kh\u00e1c g\u00ec ngAfterContentlnit. Ch\u1ec9 m\u1ed9t thu\u1ed9c t\u00ednh &lt;button&gt;&lt;\/button&gt; \u0111\u01b0\u1ee3c th\u00eam v\u00e0o BComponent. Nh\u1ea5n v\u00e0o n\u00f3 s\u1ebd g\u00e2y ra v\u00f2ng l\u1eb7p ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i. \u0110i\u1ec1u n\u00e0y k\u00edch ho\u1ea1t hook nh\u01b0 \u0111\u01b0\u1ee3c ch\u1ec9 ra b\u1edfi s\u1ef1 ng\u1eabu nhi\u00ean c\u1ee7a background-color.<\/span><\/p>\n<h3><b>ngAfterViewlnit<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngAfterViewlnit \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t m\u1ed9t l\u1ea7n sau khi ch\u1ebf \u0111\u1ed9 xem DOM ho\u00e0n t\u1ea5t quy tr\u00ecnh kh\u1edfi t\u1ea1o. Ch\u1ebf \u0111\u1ed9 xem lu\u00f4n t\u1ea3i ngay sau n\u1ed9i dung, ngAfterViewlnit ch\u1edd c\u00e1c truy v\u1ea5n @ViewChild(ren) \u0111\u1ec3 gi\u1ea3i quy\u1ebft. C\u00e1c ph\u1ea7n t\u1eed n\u00e0y \u0111\u01b0\u1ee3c truy v\u1ea5n t\u1eeb b\u00ean trong c\u00f9ng m\u1ed9t ch\u1ebf \u0111\u1ed9 xem c\u1ee7a component.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hook n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi c\u1ea7n truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c truy v\u1ea5n b\u1eb1ng @ViewChild ho\u1eb7c @ViewChildren.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, th\u1ebb H3 c\u1ee7a BComponent \u0111\u01b0\u1ee3c truy v\u1ea5n v\u00e0 ngAfterViewlnit th\u1ef1c thi ngay khi c\u00f3 k\u1ebft qu\u1ea3 truy v\u1ea5n.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2 } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-c',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am C.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Hello World!&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class CComponent { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-b',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p #BStatement&gt;I am B.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;ng-content&gt;&lt;\/ng-content&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class BComponent implements AfterViewInit {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ViewChild(\"BStatement\", { read: ElementRef }) pStmt: ElementRef;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(private renderer: Renderer2) { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngAfterViewInit() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', 'yellow');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-a',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngAfterViewInit Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am A.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h3&gt;BComponent Content DOM&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;app-c&gt;&lt;\/app-c&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AComponent { }<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Renderer2 thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a BComponet. \u0110i\u1ec1u n\u00e0y cho bi\u1ebft ph\u1ea7n t\u1eed \u1edf ch\u1ebf \u0111\u1ed9 xem (view) \u0111\u01b0\u1ee3c truy v\u1ea5n th\u00e0nh c\u00f4ng nh\u1edd ngAferViewlnit.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Quy tr\u00ecnh render:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">B\u1eaft \u0111\u1ea7u v\u1edbi <\/span>AComponent, \u0111\u1ec3 ho\u00e0n t\u1ea5t quy tr\u00ecnh AComponent ph\u1ea3i k\u1ebft xu\u1ea5t BComponent.<\/li>\n<li>BComponent chi\u1ebfu n\u1ed9i dung trong ph\u1ea7n t\u1eed c\u1ee7a n\u00f3 qua thu\u1ed9c t\u00ednh &lt;ng-content&gt;.<\/li>\n<li>CComponent l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a n\u1ed9i dung \u0111\u01b0\u1ee3c chi\u1ebfu v\u00e0 s\u1ebd ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t. BComponent ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t th\u00ec ngAfterViewlnit k\u00edch ho\u1ea1t.<\/li>\n<li>Khi AComponent ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t th\u00ec ngAfterViewlnit s\u1ebd kh\u00f4ng k\u00edch ho\u1ea1t l\u1ea1i.<\/li>\n<\/ul>\n<h3><b>ngAfterViewChecked<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngAfterViewChecked k\u00edch ho\u1ea1t sau b\u1ea5t k\u1ef3 chu k\u1ef3 ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i n\u00e0o nh\u1eafm v\u00e0o ch\u1ebf \u0111\u1ed9 xem (view) c\u1ee7a component. Hook ngAfterViewChecked cho ph\u00e9p developers t\u1ea1o \u0111i\u1ec1u ki\u1ec7n thu\u1eadn l\u1ee3i cho c\u00e1ch ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn ch\u1ebf \u0111\u1ed9 xem DOM.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Component, ViewChild, AfterViewChecked, ElementRef, Renderer2 } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-c',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am C.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;Hello World!&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class CComponent { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-b',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p #BStatement&gt;I am B.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;button (click)=\"$event\"&gt;CLICK&lt;\/button&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;ng-content&gt;&lt;\/ng-content&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class BComponent implements AfterViewChecked {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@ViewChild(\"BStatement\", { read: ElementRef }) pStmt: ElementRef;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0constructor(private renderer: Renderer2) { }<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0randomRGB(): string {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return `rgb(${Math.floor(Math.random() * 256)},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0${Math.floor(Math.random() * 256)},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0${Math.floor(Math.random() * 256)})`;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0ngAfterViewChecked() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', this.randomRGB());<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-a',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngAfterViewChecked Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am A.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h3&gt;BComponent Content DOM&lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;app-c&gt;&lt;\/app-c&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/app-b&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AComponent { }<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Nh\u00ecn chung, quy tr\u00ecnh render c\u1ee7a hook ngAfterViewChecked g\u1ea7n nh\u01b0 t\u01b0\u01a1ng t\u1ef1 v\u1edbi ngAfterViewlnit. B\u00ean c\u1ea1nh \u0111\u00f3, khi nh\u1ea5n v\u00e0o ph\u1ea7n t\u1eed &lt;button&gt; s\u1ebd kh\u1edfi t\u1ea1o m\u1ed9t v\u00f2ng ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i. ngAfterContentChecked s\u1ebd k\u00edch ho\u1ea1t v\u00e0 ng\u1eabu nhi\u00ean h\u00f3a m\u00e0u n\u1ec1n c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c truy v\u1ea5n m\u1ed7i khi nh\u1ea5n v\u00e0o n\u00fat.\u00a0<\/span><\/p>\n<h3><b>ngOnDestroy<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngOnDestroy k\u00edch ho\u1ea1t khi component b\u1ecb x\u00f3a kh\u1ecfi ch\u1ebf \u0111\u1ed9 xem (view) v\u00e0 DOM. Hook n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 d\u1ecdn d\u1eb9p t\u00e0i nguy\u00ean, h\u1ee7y c\u00e1c subscription, clearInterval\/setTimeout \u0111\u1ec3 tr\u00e1nh memory leak tr\u01b0\u1edbc khi component b\u1ecb x\u00f3a.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Directive, Component, OnDestroy } from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Directive({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: '[appDestroyListener]'<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class DestroyListenerDirective implements OnDestroy {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0ngOnDestroy() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0console.log(\"Goodbye World!\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@Component({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selector: 'app-example',<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0template: `<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;ngOnDestroy Example&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;button (click)=\"toggleDestroy()\"&gt;TOGGLE DESTROY&lt;\/button&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p appDestroyListener *ngIf=\"destroy\"&gt;I can be destroyed!&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0`<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class ExampleComponent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0destroy: boolean = true;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0toggleDestroy() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.destroy = !this.destroy;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Khi kh\u1edfi ch\u1ea1y quy tr\u00ecnh, th\u1ebb destroy c\u1ee7a ExampleComponent s\u1ebd chuy\u1ec3n sang false, ch\u1ec9 th\u1ecb c\u1ea5u tr\u00fac *nglf \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 l\u00e0 false v\u00e0 ngOnDestroy \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t. *nglf x\u00f3a m\u00e1y ch\u1ee7 &lt;p&gt; c\u1ee7a n\u00f3 v\u00e0 qu\u00e1 tr\u00ecnh n\u00e0y l\u1eb7p l\u1ea1i b\u1ea5t k\u1ef3 s\u1ed1 l\u1ea7n nh\u1ea5n v\u00e0o n\u00fat \u0111\u1ec3 chuy\u1ec3n destroy th\u00e0nh false.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Angular_lifecycle_hook\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Angular lifecycle hook<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Angular lifecycle hook Hook \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 l\u00e0m g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Khi kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt v\u00e0 h\u1ee7y directives ho\u1eb7c components, Angular g\u1ecdi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c lifecycle hook l\u00ean qu\u00e1 tr\u00ecnh n\u00e0y. Angular qu\u1ea3n l\u00fd lifecycle c\u1ee7a m\u1ed9t components, n\u00f3 \u0111\u01b0\u1ee3c t\u1ea1o v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c th\u00e0nh ph\u1ea7n con, \u0111\u01b0\u1ee3c ki\u1ec3m tra khi thu\u1ed9c t\u00ednh li\u00ean k\u1ebft d\u1eef li\u1ec7u thay \u0111\u1ed5i v\u00e0 s\u1ebd b\u1ecb h\u1ee7y tr\u01b0\u1edbc khi b\u1ecb x\u00f3a kh\u1ecfi DOM.<\/span><\/p>\n<h3><b>NgOnlnit c\u00f3 c\u00f4ng d\u1ee5ng g\u00ec trong Angular?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong Angular, ngOnlinit lifecycle hook ho\u1ea1t \u0111\u1ed9ng sau khi th\u1ef1c thi constructor v\u00e0 tr\u01b0\u1edbc khi kh\u1edfi t\u1ea1o \u0111\u1ea7u v\u00e0o c\u1ee7a th\u00e0nh ph\u1ea7n. N\u1ebfu th\u00e0nh ph\u1ea7n c\u1ea7n b\u1ea5t k\u1ef3 kh\u1edfi t\u1ea1o n\u00e0o n\u1eefa, n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng th\u1ec3 th\u1ef1c hi\u1ec7n. C\u00e1c d\u1ecbch v\u1ee5 nh\u01b0 g\u1ecdi \u0111i\u1ec7n ho\u1eb7c thi\u1ebft l\u1eadp \u0111\u0103ng k\u00fd l\u00e0 nh\u1eefng c\u00e1ch s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn c\u1ee7a ngOnlnit.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn c\u1ee7a ngOnInit:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 kh\u1edfi t\u1ea1o ph\u1ee9c t\u1ea1p.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">G\u1ecdi API\/services \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp c\u00e1c subscription.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">X\u1eed l\u00fd logic ph\u1ee9c t\u1ea1p kh\u00f4ng n\u00ean \u0111\u1eb7t trong constructor.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Kh\u00e1c v\u1edbi constructor, ngOnInit \u0111\u1ea3m b\u1ea3o r\u1eb1ng t\u1ea5t c\u1ea3 c\u00e1c binding \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp<\/span><\/p>\n<h3><b>C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng lifecycle hook n\u00e0o \u0111\u1ec3 theo d\u00f5i t\u1ea5t c\u1ea3 thay \u0111\u1ed5i \u0111\u1ed1i v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb @input?\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">ngOnlnit ch\u00ednh l\u00e0 lifecycle hook \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi Angular kh\u1edfi t\u1ea1o t\u1ea5t c\u1ea3 thu\u1ed9c t\u00ednh li\u00ean k\u1ebft d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t directives. \u0110\u1ec3 x\u1eed l\u00fd b\u1ea5t k\u1ef3 c\u00f4ng vi\u1ec7c kh\u1edfi t\u1ea1o b\u1ed5 sung n\u00e0o, h\u00e3y s\u1eed d\u1ee5ng h\u00e0m ngOnlnit(). Khi ph\u00e1t hi\u1ec7n thay \u0111\u1ed5i \u0111\u1ea7u ti\u00ean c\u1ee7a components \u0111\u01b0\u1ee3c ch\u1ea1y, hook n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c g\u1ecdi.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_Angular_lifecycle_hook\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 Angular lifecycle hook<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular lifecycle hook l\u00e0 m\u1ed9t kh\u00e1i ni\u1ec7m l\u1edbn v\u00e0 bao g\u1ed3m nhi\u1ec1u lo\u1ea1i hook kh\u00e1c nhau trong Angular. Khi m\u1ed9t hook \u0111\u01b0\u1ee3c g\u1ecdi, n\u00f3 s\u1ebd \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng Angular. N\u1ebfu b\u1ea1n c\u00f3 \u0111\u1ecbnh h\u01b0\u1edbng s\u1eed d\u1ee5ng Angular trong t\u01b0\u01a1ng lai th\u00ec vi\u1ec7c bi\u1ebft v\u1ec1 c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a m\u1ed7i hook v\u00e0 nh\u1eefng g\u00ec c\u00f3 th\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c t\u1eeb hook s\u1ebd gi\u00fap b\u1ea1n ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng t\u1ed1t h\u01a1n.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Directives v\u00e0 components c\u00f3 Angular lifecycle khi Angular \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt ho\u1eb7c ph\u00e1 h\u1ee7y ch\u00fang. Developer c\u00f3 th\u1ec3 khai th\u00e1c v\u00f2ng \u0111\u1eddi b\u1eb1ng c\u00e1ch tri\u1ec3n khai m\u1ed9t ho\u1eb7c nhi\u1ec1u giao di\u1ec7n Angular lifecycle hook trong th\u01b0 vi\u1ec7n l\u00f5i (core library) c\u1ee7a Angular. \u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":81884,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-81406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u v\u1ec1 t\u1ea5t t\u1ea7n t\u1eadt v\u1ec1 Angular Lifecycle Hook cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u, bao g\u1ed3m c\u00e1c lifecycle hook ph\u1ed5 bi\u1ebfn trong v\u00f2ng \u0111\u1eddi c\u1ee7a Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft\" \/>\n<meta property=\"og:description\" content=\"Directives v\u00e0 components c\u00f3 Angular lifecycle khi Angular \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt ho\u1eb7c ph\u00e1 h\u1ee7y ch\u00fang. Developer c\u00f3 th\u1ec3 khai th\u00e1c v\u00f2ng \u0111\u1eddi b\u1eb1ng c\u00e1ch tri\u1ec3n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T02:29:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft - ITviec Blog","description":"T\u00ecm hi\u1ec3u v\u1ec1 t\u1ea5t t\u1ea7n t\u1eadt v\u1ec1 Angular Lifecycle Hook cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u, bao g\u1ed3m c\u00e1c lifecycle hook ph\u1ed5 bi\u1ebfn trong v\u00f2ng \u0111\u1eddi c\u1ee7a Angular.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft","og_description":"Directives v\u00e0 components c\u00f3 Angular lifecycle khi Angular \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt ho\u1eb7c ph\u00e1 h\u1ee7y ch\u00fang. Developer c\u00f3 th\u1ec3 khai th\u00e1c v\u00f2ng \u0111\u1eddi b\u1eb1ng c\u00e1ch tri\u1ec3n","og_url":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-11-25T02:29:10+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg","type":"image\/jpeg"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"14 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft","datePublished":"2024-11-25T02:29:10+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/"},"wordCount":3524,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/","url":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/","name":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg","datePublished":"2024-11-25T02:29:10+00:00","description":"T\u00ecm hi\u1ec3u v\u1ec1 t\u1ea5t t\u1ea7n t\u1eadt v\u1ec1 Angular Lifecycle Hook cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u, bao g\u1ed3m c\u00e1c lifecycle hook ph\u1ed5 bi\u1ebfn trong v\u00f2ng \u0111\u1eddi c\u1ee7a Angular.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/angular-lifecycle-hook-vippro.jpg","width":1500,"height":790,"caption":"angular lifecycle hook - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/angular-lifecycle-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Angular Lifecycle hook: Chi ti\u1ebft 8 lifecycle hook quan tr\u1ecdng c\u1ea7n bi\u1ebft"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/81406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=81406"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/81406\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/81884"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=81406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=81406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=81406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}