Dynamic Component cho phép bạn render component trong lúc runtime, thay vì phải viết cố định trong template. Kỹ thuật này cực kỳ hữu ích khi bạn cần hiển thị nội dung tùy biến như banner quảng cáo, widget dashboard, modal động hoặc hệ thống plugin mở rộng. Bài viết dưới đây tổng hợp toàn […]

Angular cho phép bạn định nghĩa CSS cho từng component theo dạng “cô lập” (scoped), tránh việc style tràn sang component khác. Bài viết này tổng hợp toàn bộ kiến thức về Component Styles, View Encapsulation, các selector đặc biệt và nhiều ví dụ thực tế. 1. Inline Styles với styles: [] Dùng cho CSS

Shared Service là cách giao tiếp mạnh nhất trong Angular khi bạn cần truyền dữ liệu hai chiều giữa Parent và nhiều Child, hoặc giữa các components không có quan hệ cha – con trực tiếp. Cốt lõi của kỹ thuật này chỉ xoay quanh 2 hành động: next() → 1 ông bắn dữ liệu

@ViewChild() là kỹ thuật mạnh mẽ cho phép Parent truy cập trực tiếp vào Child component trong TypeScript class, không chỉ trong template. Đây là cách Parent “cầm remote điều khiển” Child – gọi method, đọc state, xử lý logic phức tạp, chạy trong lifecycle hooks và dễ unit test. 1. Mục đích của @ViewChild()

Template Reference Variable (biến tham chiếu template) cho phép Parent truy cập trực tiếp vào Child component ngay trong template mà không cần dùng @ViewChild hoặc code trong TypeScript. Nó hoạt động bằng cách “đặt tên” cho Child component bằng cú pháp #name để Parent gọi trực tiếp method và đọc property của Child. 1.

@Output() là cơ chế chuẩn của Angular để Component Child gửi dữ liệu hoặc sự kiện ngược lên Parent. Nếu @Input() là một chiều Parent → Child, thì @Output() chính là chiều ngược lại Child → Parent, hoạt động dựa trên EventEmitter để tạo ra một sự kiện tùy chỉnh (custom event). Khi Child cần

ngOnChanges() là lifecycle hook quan trọng trong Angular, cho phép Component Child theo dõi mọi thay đổi của tất cả @Input(). Không giống Setter chỉ xử lý từng input đơn lẻ, ngOnChanges cung cấp: Giá trị cũ (previousValue) Giá trị mới (currentValue) Thông tin lần đầu thay đổi (isFirstChange()) Danh sách tất cả input thay

Setter Input là kỹ thuật cho phép bạn chặn, kiểm soát và xử lý dữ liệu ngay lúc Component Child nhận từ Parent. Khác với thông thường chỉ gán thẳng giá trị, Setter giúp bạn: Validate dữ liệu Transform (chuyển đổi) dữ liệu Gán giá trị mặc định Trigger side effects (gọi hàm, load dữ

@Input() là cơ chế cơ bản nhất để truyền dữ liệu từ component cha (Parent) sang component con (Child) trong Angular. Đây là dạng giao tiếp một chiều, nghĩa là Parent thay đổi → Child sẽ tự động nhận được. 🔍 Vì sao cần @Input()? Angular thiết kế mỗi component như một khối độc lập

Signal là một trong những thay đổi quan trọng nhất của Angular từ phiên bản 16+ và trở thành hướng đi chính của Angular 17–18. Nó giúp quản lý trạng thái (state) nhẹ hơn, nhanh hơn và dễ dùng hơn so với cơ chế cũ dựa trên Zone.js và Change Detection truyền thống. Bài viết