Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Angular 21 Full Course - Complete Zero to Hero Angular 2026

Khóa Học Angular 21 Toàn Tập - Từ Cơ Bản Đến Nâng Cao Cho Năm 2026

Khóa Học Angular 21 Toàn Tập - Từ Cơ Bản Đến Nâng Cao Cho Năm 2026

Thành Thạo Angular 21: Khai Thác Signals, defer, @if, @for và Các Tính Năng Nâng Cao của Core và Common Module

4.5
(473 đánh giá)
2,244 học viên
Giảng viên
Hashmath Rz
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
16.5 giờ video
221 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Làm Chủ Angular 18 Từ Cơ Bản – Hiểu Các Khối Xây Dựng Cốt Lõi Như Components, Services, Modules, và Hơn Thế Nữa.
Đi Sâu Vào Cách Hoạt Động Bên Trong Của Angular Để Hiểu Mọi Thứ Kết Hợp Như Thế Nào.
Xây Dựng Ứng Dụng Web Động Bằng Các Công Cụ và Tính Năng Mạnh Mẽ Của Angular.
Tạo Các Component Có Thể Tái Sử Dụng Để Cấu Trúc Ứng Dụng Angular Hiệu Quả.
Triển Khai Dependency Injection và Services Cho Kiến Trúc Sạch Sẽ, Có Thể Mở Rộng.
Thành Thạo RxJS và Observables Để Xử Lý Luồng Dữ Liệu Bất Đồng Bộ Trong Angular.
Thành Thạo Signals - Lập Trình Phản Ứng Mới Trong Angular 18
Tăng Tốc Phát Triển Với Các Lệnh Angular CLI và Các Thực Hành Tốt Nhất.
Hiểu Các Lifecycle Hooks Của Angular và Quản Lý Trạng Thái Ứng Dụng Hiệu Quả.
Cập Nhật Các Tính Năng Mới Nhất Của Angular 18 và Làm Mới Kỹ Năng Của Bạn.
Có Kiến Thức Chuyên Sâu Về Cách Xây Dựng Attribute và Structural Directives Tùy Chỉnh
Hiểu Các Câu Hỏi Quan Trọng Về Angular: Tại Sao Lại Là Angular, Lợi Ích Là Gì?
Tự Tin Với Các Chủ Đề Nâng Cao Như View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks và Hơn Thế Nữa

Yêu cầu

Kiến thức cơ bản về HTML, CSS và JavaScript được khuyến nghị.
Quen thuộc với TypeScript sẽ hữu ích, nhưng đừng lo, chúng tôi sẽ đề cập những điều cần thiết.
Một máy tính đã cài đặt Node JS và npm (chúng tôi sẽ hướng dẫn bạn cài đặt).
Sự háo hức học hỏi và xây dựng những ứng dụng Angular tuyệt vời!

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

Người mới bắt đầu muốn học Angular từ đầu và xây dựng ứng dụng web động.
Các nhà phát triển JavaScript muốn nâng cao kỹ năng với một framework hiện đại.
Các nhà phát triển đã quen với các framework khác như React hoặc Vue, muốn thành thạo Angular.
Người dùng Angular trước đây muốn nâng cấp kỹ năng lên Angular 18.
Bất kỳ ai muốn hiểu cách hoạt động bên trong của Angular và xây dựng các ứng dụng có thể mở rộng.

Nội dung khóa học

13 phần • 221 bài giảng
1 Giới Thiệu
2 Thiết Lập Trình Soạn Thảo Mã
3 Cái Nhìn Đầu Tiên Về VSCODE
4 Cài Đặt Giao Diện VSCODE
5 Cài Đặt Font Chữ
6 Cài Đặt Plugin
7 Cài Đặt Node js và Cách Sử Dụng NPM
8 Kết Thúc
1 Giới Thiệu Về Angular
2 Ứng Dụng Một Trang (SPA) Là Gì
3 Angular CLI
4 Dự Án Angular Đầu Tiên
5 Giải Thích NG SERVE (Quy Trình BTS)
6 Cấu Trúc Tệp Angular I
7 Cấu Trúc Tệp Angular II
8 Cấu Trúc Tệp Angular III
1 Component Trong Angular Là Gì
2 Nhiệm Vụ !!! (Components)
3 Cách Components Được Tải Bên Trong Trình Duyệt
4 Tạo Component Angular Thủ Công
5 Tải Component Bên Trong Trình Duyệt I
6 Tải Component Bên Trong Trình Duyệt II
7 Lồng Ghép Component
8 Thuộc Tính Template
9 Thuộc Tính Style
10 Cách Tiếp Cận Tốt Hơn Cho Templates & Styles
11 Tạo Component Sử Dụng Angular CLI
1 String Interpolation (Text Interpolation)
2 Tìm Hiểu Sâu Về String Interpolation
3 Tại Sao Gọi Là String Interpolation
4 Property Binding
5 String Interpolation VS Property Binding
6 Class Binding
7 Áp Dụng Class Binding Với Điều Kiện Sai
8 Nhiệm Vụ !!!
9 Giải Pháp Nhiệm Vụ !!!
10 Class Binding Với Giá Trị Chuỗi
11 Angular Style Binding
12 Nhiều Style Binding
13 Class Binding VS Style Binding
14 Event Binding
15 Thêm Về Event Bindings
16 Lọc Sự Kiện I
17 Lọc Sự Kiện II
18 Template Variable
19 Two Way Data Binding I
20 Two Way Data Binding II
21 One way VS Two Way Data Binding
1 Angular Directives Là Gì
2 Component & Structural Directive
3 NgIf Directive (Cách Cũ)
4 Cú Pháp @if (Cập Nhật Mới)
5 Cách Tiếp Cận Điều Kiện Else
6 Ng-Template
7 Nhiều Điều Kiện I - NgIf
8 Nhiều Điều Kiện II - Sử Dụng NgIf & Else
9 Nhiều Điều Kiện III - Cú Pháp Mới @if
10 Sự Khác Biệt Giữa if và if else
11 NgIf - Điều Kiện Giá Trị Số I
12 @if - Điều Kiện Giá Trị Số II
13 NgIf - Điều Kiện Giá Trị Chuỗi I
14 @if - Điều Kiện Giá Trị Chuỗi II
15 Tìm Hiểu Sâu Về Ng-Template
16 NgTemplateOutlet Directive
17 Giới Thiệu Về NgFor
18 Cú Pháp Vòng Lặp Mới @for
19 Lấy Danh Sách Không Thứ Tự
20 Lấy Mảng Đối Tượng
21 Lấy Mảng Đối Tượng - Cú Pháp @for
22 Cơ Chế Phát Hiện Thay Đổi Của Angular I
23 Cơ Chế Phát Hiện Thay Đổi Của Angular II
24 Chỉ Mục Vòng Lặp For Angular I
25 Chỉ Mục Vòng Lặp For Angular II
26 Độ Dài Mảng Users
27 Thuộc Tính Count Của Vòng Lặp For
28 Cách Xử Lý Mảng Rỗng
29 Khối cú pháp @empty
30 Thuộc Tính First, last, Even và Odd Của Vòng Lặp For
31 NgSwitchCase
32 NgSwitchCase Default
33 Cú Pháp Mới Switch Case @default
34 ngStyle Directive
35 NgClass Directive
36 Structural VS Attribute Directive
1 Mối Quan Hệ Component Là Gì
2 Mối Quan Hệ Cha-Con (Tìm Hiểu Sâu)
3 Luồng Dữ Liệu Từ Cha Sang Con I
4 Luồng Dữ Liệu Từ Cha Sang Con II
5 Luồng Dữ Liệu Nhiều Chiều Từ Cha Sang Con
6 Hiểu Luồng Dữ Liệu Từ Cha Sang Con
7 Luồng Dữ Liệu Từ Con Lên Cha (@ViewChild) I
8 Luồng Dữ Liệu Từ Con Lên Cha (@ViewChild) II
9 Luồng Dữ Liệu Từ Con Lên Cha (@ViewChild) III
10 Luồng Dữ Liệu Từ Con Lên Cha (@output & Event Emitter)
11 Luồng Dữ Liệu Từ Con Lên Cha (@output & Event Emitter) II
12 @viewChild VS @Output
13 ng-content Content Projection
14 Các Component Có Thể Tái Sử Dụng
15 Multi Slot Content Projection
1 LifeCycle Hooks Là Gì
2 Render Components Theo Chương Trình I
3 Render Components Theo Chương Trình II
4 NgOnChanges LifeCycle Hook I
5 NgOnChanges LifeCycle Hook II
6 NgOnInit LifeCycle Hook
7 Constructor Method
8 NgDoCheck LifeCycle Hook
9 NgOnChanges VS NgDoCheck
10 NgAfterContentInit LifeCycle hook
11 NgAfterContentChecked LifeCycle Hook
12 NgAfterViewInit LifeCycle Hook
13 NgAfterViewChecked LifeCycle Hook
14 NgOnDestroy LifeCycle Hook
1 Angular Pipes Là Gì
2 Uppercase Pipe
3 Lowercase & Title case Pipe
4 Number Pipe
5 Vai Trò Của String Interpolation Trong Angular Pipes
6 Percentage & Currency Pipes
7 Parameterized Pipes
8 Date & Time Pipes
9 Định Dạng Ngày Tùy Chỉnh
10 Định Dạng Thời Gian Tùy Chỉnh
11 JSON Pipe
12 Slice Pipe
13 Chaining Pipe
1 Giới Thiệu Về Angular Services
2 Tạo Angular Service Thủ Công
3 Trường Hợp Sử Dụng Angular Service I
4 Trường Hợp Sử Dụng Angular Service II
5 Dependency Injection I
6 Dependency Injection II
7 Dependency Injection III
8 Cách DI Hoạt Động
9 Tạo Service Sử Dụng Angular CLI
10 Trường Hợp Sử Dụng Angular Services I
11 Trường Hợp Sử Dụng Angular Services II
12 Angular Interface
13 Tệp Riêng Cho Angular Interface
14 Xử Lý Các Trường Tùy Chọn
1 Giới Thiệu Angular Template Driven Forms
2 Chuyển Đổi HTML Form Sang Angular Template Driven Form
3 NgForm - Lớp FormGroup
4 NgModel - Lớp FormControl
5 Xác Thực Form I
6 Xác Thực Form II
7 Xác Thực Form III
8 Thêm Viền Đỏ Vào Input
9 Xác Thực MinLength
10 Xác Thực MaxLength
11 Xác Thực Email
12 Xác Thực Text Area
13 ngSubmit
14 Vô Hiệu Hóa Nút Submit
1 Giới Thiệu Phần (Angular 19 Reactive Form - Đã Cập Nhật)
2 Form Control New Instances & Form Control Directive (Angular 19 - Đã Cập Nhật)
3 Kết Nối Tất Cả Inputs Với Form Control New Instance (Angular 19 Đã Cập Nhật)
4 Reactive Form Groups (Đã Cập Nhật Angular 19)
5 Kết Nối Formcontrol Với Formgroup I (Angular 19 Đã Cập Nhật)
6 Kết Nối Formcontrol Với Formgroup II (Angular 19 Đã Cập Nhật)
7 Hoàn Tất Tất Cả Xác Thực (Angular 19 Đã Cập Nhật)
8 Giới Thiệu Phần (Reactive Forms)
9 Thiết Lập Reactive Form
10 Tạo Các Reactive Form Controls Theo Chương Trình
11 Xác Thực Cơ Bản Reactive Form
12 Reactive Form - Thêm Nhiều Validation
13 Hoàn Tất Tất Cả Validation
14 Nhóm Form Lồng Nhau
15 Reactive Form Array I
16 Reactive Form Array II
17 Gửi Reactive Form & Lấy Giá Trị Form
18 Nhóm Form Lồng Nhau
19 Reactive Form Array
20 Reactive Form Builder
21 Thêm Validation Tùy Chỉnh I
22 Thêm Validation Tùy Chỉnh II
23 Thêm Validation Tùy Chỉnh III
24 Kết Thúc Phần
1 Giới Thiệu Phần
2 Angular Routing & Navigation Là Gì
3 Cách Triển Khai Angular Routing & Navigation
4 Tạo Ứng Dụng Angular Mới
5 Cấu Hình Angular Router
6 Angular Router Outlet
7 Angular Router Link
8 Angular Base Url
9 Angular Base Router
10 Router So Với Href
11 Angular Routerlinkactive
12 Biến Số Tham Số Router
13 Lấy Tham Số Router
14 Observable Là Gì
15 Observable Subscribe
16 Observable Next
17 Observable So Với Hàm
18 Lập Trình Đồng Bộ So Với Bất Đồng Bộ
19 Observable Subscribe & Unsubscribe
20 Nhiều Tham Số Router
21 Query Parameters
22 Module Riêng Cho Angular Routing
23 Điều Hướng Theo Chương Trình
24 Wild Card Routers
25 Kết Thúc Phần
1 Giới Thiệu Angular Signals
2 Angular Signal Update()
3 Angular Signal So Với Cơ Chế Change Detection
4 Cách Chia Sẻ Angular Signal Giữa Các Component
5 Trạng Thái Signal Dùng Chung
6 Signals Với Objects I
7 Signals Với Objects II
8 Mảng Trong Signals
9 Phương Thức SET() Trong Angular Signal
10 So Sánh Sâu SET() Với UPDATE ()
11 Phương Thức Computed () Trong Signals
12 Computed So Với Change Detection Trong Angular
13 Signal Effects ()
14 Thực Hành Tốt Nhất Với Angular Signals
15 Đặt Tên & Tổ Chức Angular Signals
16 Lỗi Thường Gặp Với Angular Signals
17 ReadOnly Signals
18 ReadOnly Signals Trong Components

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

This course will give you a solid foundation in Angular 21 by providing an in-depth tour of all the advanced features available in the Angular Core and Common modules.

These two baseline modules are the foundation for everything in Angular, so mastering them in detail is essential. Angular has evolved significantly over the years, and with the introduction of Signals, there are now multiple ways to approach certain tasks. In this course, we’ll cover each feature from both perspectives—using Signals and decorators, where applicable.

In this course, you’ll get a comprehensive guided tour of both basic and advanced functionalities available in these essential Angular modules, including features like Angular Elements.

We’ll cover everything from the most commonly used Angular features to the more advanced topics, such as change detection modes, style isolation, dependency injection, content projection, internationalization, standalone components, and more.

The course assumes no prior Angular experience. Each concept builds upon the previous one, so there are no forward references, making the learning process smooth and logical.

While we start with Angular fundamentals, the course quickly transitions to intermediate and advanced topics, ensuring there's something for developers at every level.

To help you master the standalone components feature, we’ll dedicate a section on how to migrate existing applications to use standalone components and remove NgModules completely.


Course Overview

We’ll begin with a quick, practical introduction to the Angular framework. You’ll set up your development environment and use the Angular CLI to quickly scaffold a project.

With this playground, we’ll answer common Angular questions: Why Angular? What are its main advantages and key features? You’ll learn about change detection and get introduced to Angular’s template syntax.

Next, we’ll explore all the features of the Angular Core and Common modules, including:

  • Custom components with @Component

  • Components @Input and @Output, and event Emitters

  • Control flow syntax: @if, @for, @switch

  • Directives: ngFor, ngIf, ngClass, ngStyle, ngSwitch

  • @defer for partial template loading

  • Observables, Built-In Pipes, Async Pipe, and Custom Pipes

  • @Injectable and Custom Services

  • Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)

  • HTTP Client - GET, POST, PUT, DELETE

  • @ViewChild, @ViewChildren, @ContentChild, @ContentChildren

  • Content Projection with ng-content and ng-template

  • Change Detection (Normal and OnPush), View Encapsulation

  • Structural and Attribute Directives (@Directive, @Host, @HostListener, @HostBinding)

  • Dependency Injection (@Inject, @Optional, @Self, @SkipSelf)

  • Custom Change Detection

  • Angular Elements and Standalone Components

  • Angular Signals and much more.


What Will You Learn In This Course?

By the end of this course, you will have advanced, practical knowledge of Angular 21. You’ll be confident in building Angular applications, with a detailed understanding of everything offered by Angular’s Core and Common modules.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Angular
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Typescript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊