Please enable JavaScript.
Coggle requires JavaScript to display documents.
Basic (Data binding (String interpolation - Dữ liệu truyền 1 chiều từ…
Basic
- String interpolation - Dữ liệu truyền 1 chiều từ Component đến DOM, đầu nhận dữ liệu là một dấu ngoặc nhọn ở trong thẻ HTML
- Property binding - Dữ liệu truyền 1 chiều từ Component đến DOM, đầu nhận dữ liệu là một dấu ngoặc vuông đóng mở attribute của bên trong thẻ < > mở của thẻ HTML
- Event Binding - Dữ liệu được truyền 1 chiều từ DOM đễn Component. Sự kiện này được viết bên trong thẻ mở của thẻ HTML (event)="handler"
- Two way binding - Dữ liệu được truyền 2 chiều, [(ngModule)]="property". Nhưng nhớ trước khi dùng hãy import from vào app.module
- Directive đưa ra các chỉ thị để Angular chuyển đổi template thành DOM
- Component --> Directive với 1 template
- Attribute directive --> Thay đổi việc hiển thị hoặc hành vi của các DOM, component hoặc directive khác.
-
- Structural directive --> thường thêm bớt các DOM
-
- Truyền sự kiện từ con sang cha với Output
Không có tham số:
- Bước 1: Ở component cha, viết ra 1 sự kiện muốn đặt là gì cũng được
- Bước 2: Import Output và EventEmitter vào component con
- Bước 3: Viết Output() Event( Event này là cái khai ở component cha) = new EventEmitter();
- Bước 4: Đặt sự kiện cho nút ở thằng con với hàm phải có dòng this.event(Sự kiện đặt ở thằng cha).emit()
Output có tham số:
- Chú ý khi khai sự kiện vào thằng cha thì thêm ($event) vào tham số của hàm được gắn với sự kiện.
- Chú ý 2: Găn thêm tham số muốn truyền vào thằng emit() Ở thằng component con
Các bước thực hiện:
- Vào file .ts import thêm Input
- Đến export Input() valiable: typeof;
- Vào Component viết thêm thuộc tính là biến đã khai ở input
-
- String interpolation - Nghĩa là tạo biến trong file .ts và viết biến này vào giữa dấu ngoặc nhọn của file .html
-
- Template reference variable - Nó được bắt đầu bằng dấu thăng #templateVariable, nó tham chiếu đến các thẻ HTML và các Component
- Style binding & Class binding - Mục đích là muốn viết thêm điều kiện vào cho thẻ HTML
- Truyền data từ cha xuống con:
- Bước 1: Import thêm viewchild vào component cha.
- Bước 2: Import thêm component con vào component cha.
- Bước 3: Viết thêm Viewchild(trong đây viết component con vừa mới Import)
- Bước 4: Khai báo 1 biến mychild có kiểu component con vứa mới Import.
- Bước 5: Viết hàm ở thằng cha tháy đổi giá trị của mychild thì khi này giá trị thằng con cũng đã thay đổi, vaf cũng nên nhớ là phải có thêm sự kiện trong thẻ của thằng cha.
-
- Pipe định dạng đầu ra của biến ở phần view
- Tự xây pipe cho riêng mình
- Service và http Service : Mục đích là để tách phần sử lí với qpi ra riêng 1 component cho dễ quản lí code
- Sử dụng ngOnlnit - Đây là 1 life cycle hook
Chú ý providers nếu dùng hàm api cho nhiều component thì nên khai vào file app.module.ts
-
-
-