4.

Tìm hiểu về filter trong angular

4.1 Uppercase and Lowercase Filters
Trong Angular, có hai filters tích hợp rất hữu ích là uppercase và lowercase. Cả hai
filters này được sử dụng để biến đổi văn bản trong ứng dụng của bạn dựa trên việc
chuyển đổi chữ hoa và chữ thường.
Đây là cách bạn sử dụng filter uppercase và lowercase trong mẫu Angular:
Trong file html được cấu hình như sau

Trong đó:
name là biến chứa giá trị
uppercase là filter biến giá trị thành chữ hoa
lowercase là filter biến giá trị thành chữ thường

Trong file component.ts cần khai báo biến name

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

Biến name sẽ được in hoa theo filter uppercase và in thường theo filter lowercase
4.2 Currency and Number Formatting Filters
Trong Angular, có hai filters tích hợp mạnh mẽ là currency và number, được sử
dụng để định dạng số tiền và số. Cả hai filters này có khả năng biến đổi dữ liệu số
để hiển thị theo định dạng mong muốn, và chúng giúp làm cho giao diện người
dùng trở nên dễ đọc và thân thiện hơn.
4.2.1 Currency Filter
Filter currency được sử dụng để định dạng số thành định dạng tiền tệ theo quy tắc
của một quốc gia cụ thể (ví dụ: USD, EUR, VND).
Đây là cách bạn sử dụng filter currency trong mẫu Angular
Trong file html được cấu hình như sau

Trong đó:
price là biến chứa giá trị số.
'USD' là mã tiền tệ bạn muốn hiển thị.
'symbol' là cách hiển thị ký hiệu tiền tệ (có thể là 'symbol', 'code', 'name').
'1.2-2' là định dạng số với số lẻ và số lẻ cố định.
Trong file component.ts cần khai báo biến price

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

4.2.2 Number Filter

Filter number được sử dụng để định dạng số với số lẻ và số lẻ cố định.
Đây là cách bạn sử dụng filter number trong mẫu Angular
Trong file html được cấu hình như sau

Trong đó:
value là biến chứa giá trị số.
'1.2-2' là định dạng số với số lẻ và số lẻ cố định.
Trong file component.ts cần khai báo biến value
Kết quả khi chạy chương trình:
Nếu bạn có một biến value với giá trị 1234.5678, sử dụng filter number sẽ hiển thị
"1,234.57" (nếu bạn định dạng số lẻ với 2 chữ số sau dấu phẩy).

4.3 Date
Để định dạng ngày (date) theo định dạng được chỉ định trong Angular, bạn có thể
sử dụng pipe date. Pipe date cho phép bạn định dạng ngày dưới nhiều định dạng
khác nhau dựa trên các chuỗi format.
Dưới đây là một ví dụ về cách sử dụng pipe date để định dạng ngày trong Angular:
Trong file html cấu hình như sau

Trong ví dụ trên:
myDate là biến chứa giá trị ngày mà bạn muốn định dạng.
date là pipe sử dụng để định dạng ngày.
'dd/MM/yyyy' là chuỗi format mà bạn muốn áp dụng cho ngày. Trong trường hợp
này, ngày sẽ được định dạng dưới dạng "ngày/tháng/năm."
Dưới đây là một số ví dụ về các chuỗi format thường được sử dụng trong pipe
date:
'dd/MM/yyyy': Định dạng ngày/tháng/năm.
'hh:mm a': Định dạng giờ/phút (12 giờ) và AM/PM.
'MMM d, y': Định dạng tháng, ngày, và năm.
'yyyy-MM-dd': Định dạng năm, tháng, và ngày.
'EEEE': Hiển thị tên của ngày trong tuần.
'H:mm': Hiển thị giờ và phút.
Trong file component.ts ta khai báo biến myDate, lấy giá trị là ngày hiện tại

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

Chương trình sẽ in ra định dạng thời gian tùy theo format mà bạn chọn

4.4 Filter filter

Filter lọc chọn một tập hợp con của một mảng.
Bộ filter filter chỉ có thể được sử dụng trên mảng và nó trả về một mảng chỉ chứa
các mục phù hợp.
Dưới đây là cách bạn có thể sử dụng filter filter trong Angular:
Trong file component.ts tạo 1 mảng items và 1 biến searchtext để nhận giá trị nhập
vào

Trong file html tạo 1 ô input để nhập giá trị cần lọc và sử dụng ngFor để in các giá
trị trong mảng, gọi pipe locfilter để lọc

Tạo 1 file pipe và đặt tên “locfilter”, file này sử dụng để lọc giá trị theo dữ liệu
được nhập vào
Câu lệnh tạo file pipe: ng generate pipe locfilter
Kết quả khi chạy chương trình:
Khi chưa nhập gì vào ô input thì sẽ hiện tất cả những gì có trong mảng, khi nhập
dữ liệu vào ô input thì chương trình sẽ lọc ra những tên nào có chữ cái giống vào
dữ liệu đã nhập và in ra màn hình

5. Làm việc với Components

5.1 Tổng quan về Components

Components là các khối xây dựng chính cho các ứng dụng Angular. Mỗi thành
phần bao gồm:

 Một mẫu HTML mô tả nội dung hiển thị trên trang.

  Một lớp TypeScript xác định hành vi của thành phần.
 Một bộ chọn CSS (CSS selector) xác định cách thành phần được sử dụng
trong một mẫu.
 Tuỳ chọn, các kiểu CSS áp dụng cho mẫu.

Khởi tạo một Component

Cách tốt nhất để khởi tạo Component là sử dụng Angular CLI hoặc có thể khởi tạo
thủ công.Dưới đây là cách khởi tạo bằng Angular CLI

Khởi tạo Component bằng Angular CLI

Để tạo một thành phần bằng cách sử dụng Angular CLI:

1. Mở một cửa sổ dòng lệnh và điều hướng đến thư mục chứa ứng dụng của
bạn.
2. Chạy lệnh ng generate component <component-name>, trong đó
<component-name> là tên của thành phần mới của bạn.

Theo mặc định, lệnh này tạo ra các thành phần sau:

 Một thư mục mang tên theo tên của thành phần.
 Một tệp thành phần, <component-name>.component.ts.
 Một tệp mẫu, <component-name>.component.html.
 Một tệp CSS, <component-name>.component.css.
 Một tệp đặc tả kiểm tra, <component-name>.component.spec.ts.
Chỉ định bộ chọn CSS của thành phần liên kết

Mỗi thành phần đều cần có một bộ chọn CSS (CSS selector). Một bộ chọn CSS chỉ
dẫn Angular để tạo một phiên bản của thành phần này mỗi khi nó tìm thấy một thẻ
tương ứng trong mẫu HTML.

Để chỉ định bộ chọn của một thành phần, bạn cần thêm một thuộc tính selector vào
trình trang trí @Component.

Xác định template của Component

Một mẫu (template) là một khối mã HTML mô tả cách Angular sẽ hiển thị thành
phần trong ứng dụng của bạn. Bạn có thể định nghĩa một mẫu cho thành phần của
mình bằng một trong hai cách: thông qua việc tham chiếu đến một tệp ngoài hoặc
trực tiếp bên trong thành phần.
Để định nghĩa một mẫu dưới dạng một tệp ngoài, bạn cần thêm thuộc tính
templateUrl vào trình trang trí @Component.

Để định nghĩa một mẫu trực tiếp trong thành phần, bạn cần thêm thuộc tính
template vào trình trang trí @Component và cung cấp mã HTML bạn muốn sử
dụng trong đó.

Nếu bạn muốn template của mình trải dài qua nhiều dòng, hãy sử dụng dấu gạch
ngược (`). Ví dụ:

Khai báo style của một thành phần

Để khai báo các kiểu (styles) cho một thành phần mà sử dụng trong mẫu của nó,
bạn có thể làm điều đó theo một trong hai cách: thông qua việc tham chiếu đến một
tệp ngoài hoặc trực tiếp bên trong thành phần.

Để khai báo các kiểu cho một thành phần trong một tệp riêng biệt, bạn cần thêm
thuộc tính styleUrls vào trình trang trí @Component. Ví dụ:

Để khai báo các kiểu (styles) trong thành phần, bạn có thể thực hiện điều đó bằng
cách thêm thuộc tính styles vào trình trang trí @Component và cung cấp các kiểu
bạn muốn sử dụng trong đó. Ví dụ:

5.2 Vòng đời của Components

Một vòng đời của component (Component Lifecycle) là một quá trình từ khi
Component được ứng dụng Angular khởi tạo instance đến khi nó được hủy. Trong
toàn bộ quá trình sẽ bao gồm các sự kiện:
1. ngOnChanges: Khi giá trị của kết nối đầu vào/đầu ra thay đổi
2. ngOnInit: Sau ngOnChanges đầu tiên.
3. ngDoCheck:. Sự theo dõi thay đổi tùy chỉnh của nhà phát triển
4. ngAfterContentInit:. Sau khi nội dung thành phần được khởi tạo
5. ngAfterContentChecked: Sau mỗi lần kiểm tra nội dung của Component
6. ngAfterViewInit: Sau khi component's views khởi tạo.
7. ngAfterViewChecked: Sau mỗi lần check của component's views.
8. ngOnDestroy: Ngay trước khi Component bị destroy
Ví dụ về Component Lifecycle
Khởi tạo Project mới life-cycle-hook : ng new life-cycle-hook
Sau đó chạy các lệnh sau để tạo các thành phần cần thiết:
ng g c components/parent , ng g c components/child
Sau đó, thêm đoạn mã khởi đầu sau đây
Child.component.ts

Parent.component.ts

UI sẽ như hình dưới đây:

ngOnChanges: Khi giá trị của kết nối đầu vào(Input)/đầu ra(Output) thay đổi

Kiểm tra trong bảng điều khiển (console), chúng ta nên thấy rằng console.log()
được gọi sau khi mở ứng dụng lần đầu tiên.

Chúng ta muốn thay đổi giá trị của "userName" nếu đó không phải là lần thay đổi
đầu tiên hoặc nếu giá trị hiện tại chỉ là "Chris". Chúng ta có thể làm bất cứ điều gì
ở đây, hãy thực hiện trường hợp thứ hai.
ngOnInit : Phương thức này chỉ được gọi một lần trong vòng đời của thành
phần, sau cuộc gọi ngOnChanges lần đầu tiên. ngOnInit() vẫn được gọi ngay cả khi
ngOnChanges() không được gọi, điều này xảy ra khi không có đầu vào liên kết với
mẫu (template-bound inputs).
Việc ParentComponent được tạo ra trước (ngOnInit của thành phần cha được kích
hoạt trước), sau đó đến lượt ChildComponent. Nếu chúng ta thử bấm vào nút
Update, thì ngOnInit sẽ không kích hoạt. Bởi vì, như đã đề cập ở trên, nó chỉ kích
hoạt một lần duy nhất

ngDoCheck: tương tự với ngOnChanges nhưng bạn có thể sử dụng phương

pháp này để phát hiện các thay đổi mà Angular không thể hoặc không muốn phát
hiện.
Nếu chúng ta bấm vào nút Updat, chúng ta nên thấy rằng ngOnChanges và
ngDoCheck được kích hoạt.

Và nếu chúng ta tiếp tục bấm vào nút "Cập nhật", chúng ta nên thấy rằng chỉ
ngDoCheck được kích hoạt sau mỗi lần bấm,

ngOnDestroy Cuối cùng, phương thức ngOnDestroy được gọi chỉ một lần trong
vòng đời của thành phần, ngay trước khi Angular hủy bỏ nó. Đây là nơi bạn nên
thông báo cho phần còn lại của ứng dụng của bạn rằng thành phần đang bị hủy bỏ,
trong trường hợp cần có các hành động liên quan đến thông tin đó.

Ngoài ra, đây cũng là nơi bạn nên đặt tất cả các logic dọn dẹp cho thành phần đó.
Ví dụ, bạn có thể loại bỏ thông tin lưu trữ cục bộ và quan trọng nhất là hủy đăng
ký các Observable, tách các xử lý sự kiện, dừng các bộ đếm thời gian, v.v., để
tránh rò rỉ bộ nhớ.

Lưu ý rằng ngOnDestroy không được gọi khi người dùng làm tươi trang (refresh)
trang hoặc đóng trình duyệt. Vì vậy, trong trường hợp bạn cần xử lý một số logic
dọn dẹp trong những tình huống đó, bạn có thể sử dụng decorator HostListener,
như được minh họa dưới đây.

Ví dụ về ngOndestroy:
<!-- components/parent/parent.component.html -->

UI sẽ như sau :
5.3 Style
Angular cho phép chúng ta chỉ định các kiểu thành phần cụ thể. Điều này được thực hiện
bằng cách chỉ định kiểu nội tuyến hoặc sử dụng biểu định external style trong trang
trí hoặc style inline. styles:styleUrls:@Component@directive
Ví dụ về external style
Ví dụ về style inline

5.4 Tính đóng gói View

Trong Angular, các kiểu của một thành phần có thể được đóng gói trong phần tử host của
thành phần để chúng không ảnh hưởng đến phần còn lại của ứng dụng.
Người trang trí cung cấp tùy chọn đóng gói có thể được sử dụng để kiểm soát cách đóng
gói được áp dụng trên cơ sở mỗi thành phần Component

CHẾ ĐỘ CHI TIẾT

Angular sử dụng trình duyệt tích hợp

ViewEncapsulation.ShadowDom
sẵn Shadow DOM API để bao bọc chế độ xem
của thành phần bên trong ShadowRoot, được
sử dụng làm phần tử máy chủ của thành phần
và áp dụng các kiểu được cung cấp theo cách
riêng biệt.
 CHẾ ĐỘ CHI TIẾT

Angular sửa đổi các bộ chọn CSS của thành

phần để chúng chỉ được áp dụng cho chế độ
xem của thành phần và không ảnh hưởng đến
các phần tử khác trong ứng dụng, mô
ViewEncapsulation.Emulated phỏng hành vi Shadow DOM.

Angular không áp dụng bất kỳ loại đóng gói

ViewEncapsulation.None
chế độ xem nào, có nghĩa là bất kỳ kiểu nào
được chỉ định cho thành phần thực sự được áp
dụng toàn cục và có thể ảnh hưởng đến bất kỳ
phần tử HTML nào có trong ứng dụng. Chế độ
này về cơ bản giống như bao gồm các kiểu vào
chính HTML.

Thêm View Encapsulation vào các thành phần

Các phương pháp đóng gói được thêm vào bằng cách sử dụng siêu dữ liệu của trình trang
trí như hình dưới đây encapsulation@Component

Kết quả khi chạy

Các thuộc tính được chèn vào phần style của trang

ViewEncapsulation.None
Được sử dụng, khi chúng ta không muốn bất kỳ đóng gói nào. Khi sử dụng chức năng
này, các kiểu được xác định trong một thành phần ảnh hưởng đến các yếu tố của các
thành phần khác.
Trước khi chạy None, ta làm một ví dụ:
Cho một đoạn trong component nội dung như sau

Sau đó trỏ qua file scss để thêm style

Ta có kết quả nội dung thẻ <p>…</p> sẽ màu đỏ

Bây giờ ta sửa component lại như sau:

Kết quả là style ta gán ở file index đã bị ghi đè từ color red sang blue.

ViewEncapsulation.Emulated
ViewEncapsulation.Emulated là phương pháp đóng gói mặc định.
Trong một trang HTML, chúng ta có thể dễ dàng thêm một id hoặc một lớp vào phần tử
để tăng tính đặc hiệu của các quy tắc CSS để các quy tắc CSS không can thiệp lẫn nhau.
Chiến lược trong angular thêm các thuộc tính HTML duy nhất vào các kiểu CSS thành
phần và vào đánh dấu để đạt được sự đóng gói. Đây không phải là sự đóng gói thực sự.
Angular mô phỏng việc đóng gói, Do đó tên Emulated.ViewEncapsulation.Emulated
Dựa theo code dưới đây:

Và đây là kết quả.

Ta có thể thấy emulated không ghi đè lên thành phần style global.

ViewEncapsulation.ShadowDom
Shadow DOM là một cây con có phạm vi của DOM. Nó được gắn vào một phần tử (được
gọi là shadow host) của cây DOM. Shadow dom không xuất hiện dưới dạng nút con của
máy chủ bóng tối khi bạn đi qua DOM chính.
Trình duyệt giữ DOM bóng tách biệt với DOM chính. Việc kết xuất Shadow dom và
DOM chính diễn ra riêng biệt. Trình duyệt làm phẳng chúng lại với nhau trước khi hiển
thị chúng cho người dùng. Tính năng, trạng thái &; phong cách của Shadow DOM vẫn ở
chế độ riêng tư và không bị ảnh hưởng bởi DOM chính. Do đó nó đạt được sự đóng gói
thực sự.
Shadow DOM là một phần của tiêu chuẩn Web Components. Không phải tất cả các trình
duyệt đều hỗ trợ shadow dom.

Khi dùng thuộc tính ShawdowDom, ta sẽ thấy có sinh thêm 1 cây con nhỏ bên trong html