2.

Biểu thức và kết nối dữ liệu (Expression and Data Binding)

2.1 Number and String Expression

Trong Angular, chúng ta có thể làm việc với chuỗi (string) và số (number) thông
qua các biến hoặc thuộc tính trong TypeScript, tương tự như JavaScript, và hiển thị
chúng trong template của mình thông qua interpolation hoặc property binding.
Dưới đây là một số ví dụ minh họa:

Sau đó chúng ta đưa vào html để hiển thị

Kết quả

2.2 Làm việc với mảng trong Angular

2.2.1 Khai báo mảng

Bạn có thể khai báo mảng trong mã TypeScript của Angular giống như trong
JavaScript . Ví dụ khai báo một mảng khóa học:
2.2.2 Lặp qua các phần tử của mảng

Bạn có thể sử dụng lệnh *ngFor của Angular để lặp lại các mảng trong mẫu HTML
của mình. Điều này cho phép bạn tạo các phần tử HTML cho từng mục trong
mảng.
2.2.3 Sửa đổi mảng

Bạn có thể sửa đổi mảng bằng cách thêm, xóa hoặc cập nhật các phần tử trong
Angular. Ví dụ: để thêm một phần tử vào một mảng:

Để xóa một phần tử khỏi một mảng theo chỉ mục:

2.2.4 Lọc mảng (Filtering Arrays)

Bạn có thể sử của Angular để lọc các mảng dựa trên điều kiện cụ thể. Angular cho
phép bạn lọc mảng và hiển thị chỉ các phần tử thỏa mãn điều kiện đã chỉ định. Ví
dụ:

2.2.5 Ánh Xạ Mảng (Mapping Array)

Bạn có thể sử dụng hàm map trong JavaScript để biến đổi các phần tử của một
mảng thành một mảng mới. Ví dụ, ánh xạ một mảng số thành mảng bình phương
của chúng:

2.2.6 Tổng Hợp Mảng: (Reducing Arrays)

Hàm reduce có thể được sử dụng để tổng hợp một mảng thành một giá trị duy nhất.
Ví dụ, tính tổng các số trong một mảng:
2.3 Hành vi tha thứ (FORGIVING BEHAVIOR)

Trong ngữ cảnh của Angular, "hành vi tha thứ" không đề cập đến một khái niệm
hoặc tính năng cụ thể trong framework Angular. Thay vào đó, nó là một khái niệm
rộng hơn liên quan đến cách các cá nhân xử lý lỗi, vấn đề hoặc tình huống bất ngờ
trong ứng dụng Angular của họ. Dưới đây là cách bạn có thể áp dụng khái niệm về
hành vi tha thứ trong ngữ cảnh của Angular:

Xử lý Lỗi: Trong Angular, việc thực hiện các cơ chế xử lý lỗi mạnh mẽ là rất quan
trọng. Khi xảy ra lỗi, hãy sử dụng các khối try-catch, interceptor lỗi hoặc các toán
tử RxJS như catchError để xử lý lỗi một cách thông minh mà không gây sự sụp đổ
của toàn bộ ứng dụng. Điều này cho phép ứng dụng của bạn tiếp tục hoạt động,
ngay cả khi có lỗi.

Kiểm Tra Đầu Vào: Áp dụng kiểm tra và làm sạch đầu vào để ngăn dữ liệu không
mong muốn hoặc độc hại gây ra vấn đề trong ứng dụng Angular của bạn. Sử dụng
các tính năng tích hợp trong Angular như các biểu mẫu dựa trên mẫu hoặc biểu
mẫu phản ứng để đảm bảo rằng đầu vào của người dùng được kiểm tra và làm
sạch.

Phản Hồi Thân Thiện Với Người Dùng: Khi xảy ra lỗi, cung cấp thông báo lỗi rõ
ràng và thân thiện với người dùng. Các tính năng ràng buộc và chèn của Angular
có thể giúp bạn hiển thị thông báo lỗi hoặc thông báo cho người dùng, giúp họ hiểu
vấn đề và cách giải quyết nó.
Kiểm Tra Các Khả Năng Sập: Thiết kế ứng dụng Angular của bạn để sập một
cách đẹp khi một số tính năng hoặc API cụ thể không khả dụng hoặc gặp lỗi. Ví dụ,
xử lý trường hợp khi các API hoặc dịch vụ bên ngoài bị ngừng hoạt động bằng
cách cung cấp các chức năng phụ giữ chỗ hoặc thông báo chi tiết.

Kiểm Tra và Ghi Nhật Ký: Thực hiện quá trình theo dõi và ghi nhật ký trong ứng
dụng Angular của bạn để theo dõi lỗi và vấn đề trong thời gian thực. Các công cụ
như ErrorHandler của Angular có thể giúp tập trung xử lý lỗi và báo cáo.

Hãy nhớ rằng Angular là một framework để xây dựng ứng dụng web, và hành vi
tha thứ là hơn là một nguyên tắc phát triển và thiết kế còn là một tính năng cụ thể
của Angular. Điều quan trọng là áp dụng các nguyên tắc và thực hành tốt này để
tạo ra các ứng dụng Angular mạnh mẽ và thân thiện với người dùng có thể xử lý
tình huống bất ngờ một cách thông minh.

2.4. Đối tượng (Object)

Trong Angular, "object expression" không phải là một khái niệm chính thức hoặc
cú pháp được định nghĩa riêng. Tuy nhiên, Angular sử dụng các biểu thức đối
tượng (object expressions) trong các ngữ cảnh khác nhau, chẳng hạn như trong các
templates và components. Đây không phải là một đặc điểm độc đáo của Angular,
mà là một phần của ngôn ngữ TypeScript và JavaScript mà Angular được xây dựng
trên đó.

Khi ta làm việc với Angular templates hoặc components, có thể sử dụng các object
expressions để hiển thị dữ liệu hoặc tương tác với các thuộc tính và phương thức
của các đối tượng.

Đầu tiên tạo một file interface mới để định nghĩa object
Sau đó import interface vào component

Gán giá trị cho các thuộc tính của đối tượng

Gọi đối tượng ở html

Kết quả

2.5. Tìm hiểu về Data Binding

2.5.1. Data Binding là gì?

Databinding là kỹ thuật nơi dữ liệu được đồng bộ giữa component và tầng view
(template file html). Ví dụ khi người dùng cập nhật data ở tầng view thì Angular
cũng cập nhật giá trị đó ở component.
Data binding trong Angular có thể chia ra làm 2 nhóm. Đó là one way binding
(binding 1 chiều) và two way binding (binding 2 chiều).
 2.5.2. One way binding

One way binding thì dữ liệu được truyền 1 chiều. Có thể từ view sang component
hoặc ngược lại từ component sang view.

Từ component sang view chúng ta sử dụng Interpolation & Property Binding để hiển
thị dữ liệu như sau:

o Đối với Interpolation, ta sẽ click vào app.component.ts. Ví dụ như chúng ta khai

báo một biến là name = ‘huy’ thì sau đó sử dụng cặp dấu ngoặc nhọn để biểu thị
bên app.component.html. VD: welcome, <h1>{{huy}}</h1>.

Component:

View HTML:

Sau khi run ta được:

o Đối với Property Binding, chúng ta cũng truyền dữ liệu từ component sang ts,
nhưng ở đây chúng ta sẽ sử dụng nó để setup cho các thuộc tính cụ thể. Ví dụ,
chúng ta sẽ setup cho thuộc tính disabled, cụ thể button này có giá trị là true mà
bên ts truyền qua.

* Trường hợp nếu isDisabled = true thì button “I am disabled” sẽ bị khóa

Component

View HTML:
Kết quả sau khi run:

* Ngược lại nếu isDisabled = false thì button “I am disabled” sẽ không bị khóa.

Component:
View HTML:

Kết quả sau khi run:

Event Binding sẽ được truyền dữ liệu từ view sang component bằng sự kiện.

Ví dụ.

Component:
View HTML:

Kết quả sau khi run (trước và sau khi nhấn button):
2.5.3. Two way binding

Binding 2 chiều có nghĩa là chúng ta thay đổi dữ liệu từ component qua view và
ngược lại từ view chúng ta thay đổi dữ liệu. Có nghĩa là khi chúng ta thay đổi bất
kì dữ kiệu ở một cái tầng nào thì tầng còn lại cũng được cập nhật dữ liệu. Và muốn
sử dụng được cái two way binding này thì cần thêm thư viện FormsModule tại
app.module.ts
2 way binding thì hữu dụng khi mình làm form. Chúng ta sử dụng ngModel để
thực hiện việc binding 2 chiều..
app.module.ts

View HTML:

Kết quả sau khi run:

3. Working with Directives

3.1. Conditional Directives

Trong Angular, "conditional" thường được sử dụng để hiển thị hoặc ẩn các phần tử
trên trang web dựa trên một điều kiện nào đó. Có một số cách để thực hiện điều
này, trong đó *ngIf, *ngSwitch, và *ngFor là những cách phổ biến. Dưới đây là
một số lý thuyết về cách sử dụng các điều kiện trong Angular:

*ngIf: Directive *ngIf cho phép bạn hiển thị hoặc ẩn một phần tử trên trang dựa
trên một biểu thức boolean. Đây là cú pháp cơ bản:

html

Copy code

<div *ngIf="condition">

<!-- Nội dung sẽ được hiển thị nếu condition là true -->

</div>
*ngSwitch: Directive *ngSwitch cho phép bạn xác định một giá trị và hiển thị các
phần tử khác nhau dựa trên giá trị đó. Đây là cú pháp cơ bản:

html

Copy code

<div [ngSwitch]="value">

<div *ngSwitchCase="'A'">Hiển thị khi giá trị là 'A'</div>

<div *ngSwitchCase="'B'">Hiển thị khi giá trị là 'B'</div>

<div *ngSwitchDefault>Hiển thị khi không khớp với bất kỳ trường hợp
nào</div>

</div>

*ngFor: Directive *ngFor được sử dụng để lặp qua một mảng hoặc danh sách và
hiển thị các phần tử dựa trên điều kiện. Ví dụ:

html

Copy code

<div *ngFor="let item of items">

<!-- Hiển thị các mục trong mảng items -->

</div>

Ngoài ra, bạn cũng có thể kết hợp các điều kiện và sử dụng các toán tử logic để
kiểm tra điều kiện. Ví dụ:

html
Copy code

<div *ngIf="isUserLoggedIn && (userRole === 'admin' || userRole === 'editor')">

<!-- Hiển thị khi người dùng đã đăng nhập và có vai trò là admin hoặc editor -->

</div>

3.2 Styles Directives

3.2.1 ngClass
ngClass là một trong những directives của Angular được sử dụng để quản lý và
điều khiển lớp CSS trên các phần tử HTML trong ứng dụng của bạn dựa trên điều
kiện hoặc dữ liệu động. Directive này cho phép bạn thêm hoặc xóa các lớp CSS từ
một phần tử HTML một cách linh hoạt.
Ví dụ ngClass

Cách 1:

Ví dụ ta có một số thuộc tính css được định nghĩa trong file component
app.component.css như sau

Tiếp đến ta sẽ sử dụng nó trong file template html như sau

Cách 2:
Ví dụ trong file component class ta có biến cssStringVar. Sau đó ta gán nó qua bên
template html, như vậy khi giá trị cssStringVar thay đổi thì nó sẽ cập nhật giá trị
đó bên template html

Ta có file component class như sau

Ta sẽ binding giá trị cssStringVar qua file template

Kết quả của 2 cách trên là giống nhau

3.3.2 ngStyle

Chúng ta sử dụng ngStyle có thể tạo nhiều thuộc tính css trong phần tử html. Các
điều kiện sẽ được đánh giá lúc chương trình đang chạy và gán giá trị vào trong thẻ
html.
Ví dụ:

ngStyle là nơi chúng ta sử dụng các css như font-size, color, width, height như ví
dụ dưới đây.
ngStyle thay đổi style động

Trong file component class ta có biến color như sau

Trong file component app.component.css như sau

Kêt quả khi chạy chương trình:

3.3 Mouse and Keyboard Events Directives
Trong Angular, có các directives để xử lý sự kiện chuột (mouse events) và bàn
phím (keyboard events). Dưới đây là một số ví dụ về các directives liên quan đến
sự kiện chuột và bàn phím:
3.3.1 Sự kiện click
Directive này xử lý sự kiện click chuột.
Trong file template html như sau

Ta có file component class như sau

Kêt quả khi chạy chương trình:

Lúc đầu ô input trống, khi nhấn nút button thì sự kiên onClick được gọi và cho ra
kết quả sau

3.3.2 Sự kiện mouseover và mouseout

Các directives này xử lý sự kiện di chuột vào và ra khỏi một phần tử.
Trong file template html cấu hình như sau

Ta có file component class như sau:

Kêt quả khi chạy chương trình:

Lúc đầu chữ "Sự kiện mouseover" sẽ có màu đen, khi di chuột vào dòng "Hover
over me" thì sẽ chuyển qua màu đỏ, khi di chuột ra chỗ khác thì chữ lại chuyển qua
màu đen

3.3.3 Sự kiện mousedown và mouseup

Các directives này xử lý sự kiện khi nút chuột được nhấn và thả ra.
Trong file template html cấu hình như sau:

Ta có file component class như sau:

Kêt quả khi chạy chương trình:

Lúc đầu chữ "Sự kiện mousedown sẽ có màu đen, khi nhấn chuột vào dòng "Press
mouse" thì sẽ chuyển qua màu đỏ, khi thả chuột ra thì chữ lại chuyển qua màu đen

3.3.4 Sự kiện keydown và keyup

Các directives này xử lý sự kiện khi một phím bàn phím được nhấn và thả ra.
Trong file template html cấu hình như sau:
Ta có file component class như sau:

Kêt quả khi chạy chương trình:

Khi nhập kí tự "a" thì chữ " sự kiện keydown" sẽ chuyển qua màu đỏ, khi thả kí tự
"b" ra thì sẽ chuyển qua màu xanh

3.3.5 Sự kiện focus và blur

Sự kiện focus và blur trong Angular được sử dụng để xử lý sự kiện khi một phần tử
nhận focus hoặc mất focus. Dưới đây là cách bạn có thể sử dụng chúng:
Trong file template html cấu hình như sau:

Ta có file component class như sau:

Kêt quả khi chạy chương trình:

Khi click vào ô input thì chữ "sự kiện focus"sẽ chuyển qua màu đỏ, khi click ra
ngoài ô input thì sẽ chuyển qua màu xanh