Building Reusable Components in Angular – The Missing Guide

Xây dựng Component Tái Sử Dụng trong Angular – Hướng dẫn còn thiếu

Xây dựng component tái sử dụng và có thể tùy chỉnh trong Angular 21 với Content Projection, Templates và các công cụ nâng cao hơn

5.0

(33 đánh giá)

194 học viên

Giảng viên

Kobi Hari

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 829.000đ -94%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

14.0 giờ video

112 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 31/05/2026

#Angular #Angular Framework #Component Architecture #Typescript

Bạn sẽ học được gì

Tạo các component Angular có tính tái sử dụng cao và dễ tùy chỉnh bằng các API Angular hiện đại

Áp dụng các mẫu content projection để xây dựng kiến trúc component linh hoạt, dễ kết hợp

Sử dụng ng-template, TemplateRef và ViewContainerRef để xây dựng giao diện động

Làm chủ các element (attribute) directive để mở rộng và nâng cao các phần tử DOM có sẵn

Hiểu về microsyntax trong Angular (cú pháp *) và cách thiết kế API structural directive trực quan

Sử dụng ng-template, TemplateRef và ViewContainerRef để xây dựng giao diện động

Triển khai structural directive để mở rộng hành vi component một cách có khả năng mở rộng

Tạo component có thể đổi theme bằng design token và các phương pháp hay nhất về styling trong Angular

Hiểu về view encapsulation và cách Angular render và phạm vi style nội bộ

Yêu cầu

Có kinh nghiệm cơ bản với Angular (component, template, dependency injection và data binding)

Quen thuộc với Angular hiện đại (standalone components và signals)

Hiểu biết cơ bản về HTML và CSS

Đối tượng phù hợp

Lập trình viên Angular muốn xây dựng component thực sự tái sử dụng và có khả năng mở rộng

Người mới bắt đầu với Angular muốn vượt qua kiến thức cơ bản và trở nên thành thạo trong thiết kế component

Lập trình viên gặp khó khăn với component cứng nhắc và đang tìm kiếm mẫu thiết kế linh hoạt

Lập trình viên đang xây dựng hoặc có kế hoạch xây dựng thư viện component Angular hoặc hệ thống thiết kế

Nội dung khóa học

11 phần • 112 bài giảng

1 Giới thiệu

2 Điều kiện tiên quyết cho khóa học

3 Thực hành những gì bạn học

1 Giới thiệu

2 Bắt đầu với Directives trong Angular

3 Tạo custom directive đầu tiên của chúng ta

4 Thao tác với Host Element

5 Tại sao thao tác Host Element trực tiếp là thói quen xấu

6 Sử dụng Renderer để thao tác host

7 Host binding sử dụng thuộc tính "host"

8 Gắn Host với Style và Custom Properties

9 Gắn với Host Classes và Attributes

10 Lắng nghe Host Events

11 Truyền tham số cho Host Events

12 Truyền Inputs cho Directives

13 Ai sở hữu inputs?

14 Selector và input thống nhất cho Directive

15 Bài tập: Thực hành Inputs và Bindings

16 Định nghĩa Output events trong Directives

17 Thuộc tính "exportAs"

18 Thử thách - Directive "Track Mouse"

19 Kết hợp Directive

20 Thử thách - Directive "MyLink"

1 Giới thiệu

2 Hiểu về selectors

3 Thử thách - Viết Hoa Giá Trị Text Input Khi Mất Focus

4 Thử thách - Tooltip cho ảnh "alt"

5 Ví dụ điên rồ - Button Components

1 Giới thiệu

2 Bắt đầu - Hãy tạo Expander Component

3 Triển khai "Ngây Thơ" Ban Đầu

4 Tạo hoạt ảnh cho Expander

5 Sử dụng để cho phép nội dung phong phú

6 Content Projection - Ai sở hữu nội dung?

7 Content Projection nhiều khe cắm sử dụng thuộc tính "select"

8 Chọn Content sử dụng attributes

9 Chiếu Cả Toggle Button

10 Thêm Chức Năng sử dụng Directives

11 Đóng gói Component và Directives liên quan

12 Optional Dependency Injection

13 Tạo hoạt ảnh cho custom toggle

14 Content Projection Phụ Thuộc Trạng Thái

15 Sử dụng 'contentChild' để dự phòng về Toggle Button mặc định

16 Hiểu về Content Queries

17 Mẫu "Composite Component"

1 Giới thiệu

2 View Encapsulation trong Angular

3 Hiểu về khái niệm "View Encapsulation"

4 Cách Angular mô phỏng View Encapsulation

5 Kiểm tra CSS được sinh ra

6 Encapsulation trong Content Projection

7 Bộ chọn :host

8 Bộ chọn :host-context

9 Styling sử dụng custom CSS Properties (design tokens)

10 Phương pháp hay nhất - Private properties

11 Phương pháp hay nhất - Sử dụng Computed Colors làm giá trị dự phòng

12 Bộ chọn ng-deep

13 Khi nào (và nếu) chúng ta nên sử dụng ng-deep?

1 Giới thiệu

2 Hiểu về ng-container

3 Nhìn đầu tiên vào ng-template và *ngTemplateOutlet

4 Truyền Data Context cho Templates

5 Tham số đặc biệt $implicit

6 Truyền templates làm inputs cho components

7 Sử dụng Directives trên Templates

1 Giới thiệu

2 Về Ứng Dụng Của Chúng Ta

3 Tạo "Item Selector" Component

4 Chấp nhận Item Template dưới dạng Input

5 Truyền Template dưới dạng Content

6 Bọc Template trong một Directive

7 Nhắm mục tiêu Directive với `contentChild`

8 Cú pháp "Star Directive"

9 Template Context với Thông Tin Kiểu

10 Thêm ItemContainer Template

11 Triển khai Item Container Logic

1 Giới thiệu

2 Hiểu về Microsyntax

3 Điền Inputs trong Microsyntax

4 Xác minh Giá trị Inputs

5 Thử nó - Directive "myTimer"

6 Định nghĩa Template Variables trong Microsyntax

7 Context Type Guards

8 Sử dụng Signals trong Template Context

9 Định nghĩa Input Aliases trong Microsyntax

10 Nhìn mới về *ngIf và *ngFor cổ điển

11 Generic Directives

1 Giới thiệu

2 "View" trong Angular là gì?

3 Views được Tạo ra Thế Nào?

4 Embedded Views vs Host Views

5 Giới thiệu dịch vụ "ViewContainerRef"

6 Tạo Dynamic Embedded View từ Template

7 Triển khai Logic của myIf

8 Thu hẹp Context Type

9 Lập trình cùng nhau - Tạo "Timer" directive

10 Triển khai Timer Logic

11 Lập trình cùng nhau - Tạo "Repeat" structural directive

12 Triển khai Context và Logic của "myRepeat"

13 Custom Injectors trong Embedded Views

1 Giới thiệu

2 Giới thiệu & Mã Khởi Đầu

3 Giới thiệu "NgComponentOutlet"

4 Truyền Inputs cho Dynamic Components

5 Cung cấp Custom Injector cho Dynamic Components

6 ViewPicker Interface và Token

7 Trỏ đến Vị Trí Cụ Thể trong UI với VCR

8 Tạo Picker với VCR.createComponent

9 Bindings API cho việc Tạo Component Programmatic

1 Tổng kết

2 Lời kết cuối

3 Bài giảng thưởng

Giới thiệu khóa học

Mastering Angular components is what separates average developers from true professionals.

This course is focused on turning you into an expert in component authoring in Angular 21. You’ll go beyond basic components and learn the advanced building blocks that Angular provides:

element directives,
structural directives,
microsyntax,
content projection,
templates,
dynamic view composition
and more importantly, how they all fit together into powerful, real-world patterns.

At the core of this course is a powerful pattern: Composable Components. Instead of building components that try to do everything with endless inputs and interfaces, you’ll learn how to design a lean “core” component that can be extended and customized using external pieces: templates, directives, and projected content. This approach keeps your components simple, while allowing them to grow in capability without becoming complex or fragile. This makes your components flexible across scenarios, without becoming bloated with options.

Instead of creating components that are rigid, overloaded with inputs, or filled with flags, you’ll learn how to design components that are truly flexible, composable, and scalable, the kind used in real-world component libraries and design systems.

You’ll start with element (attribute) directives, learning how to extend and enhance existing DOM elements. Then we dive into selector strategies and advanced selector patterns, giving you precise control over how your directives and components are applied.

Next, we move into content projection, where you’ll learn how to design components that accept external pieces and compose them into flexible layouts. From there, we cover styling and view encapsulation, understanding how Angular scopes styles and how to build components that can be themed and customized.

After that, we go deeper into templates with ng-template, TemplateRef, and ngTemplateOutlet, followed by Angular microsyntax, where you’ll understand how the * syntax works and how to design clean, intuitive directive APIs.

We then bring it all together with structural directives and view manipulation using ViewContainerRef, giving you full control over how views are created, updated, and managed at runtime. Finally, we cover dynamic components, completing the picture of fully flexible and programmable UI composition.

Throughout the course, everything is tied together into clear patterns you can apply immediately in your own projects.

By the end, you won’t just know Angular features, you’ll know how to use them together to build components like a pro.