KIẾN THỨC CƠ BẢN ANGULAR

I. DATA BINDING
1. Component  View
1.1. Interpolation.
- Syntax: {{value}}.
- Description: Hiển thị một string, number, phép toán điều kiện 3 ngôi, một
phương thức, một getter, một nullable, hiển thị một hình ảnh, video, đường link.
1.2. Property
- Systax: [property-name] = “value” OR bind-property-name=”value”
- Description: src, value, href, disabled, hidden
1.3. Attribute
- Systax: [attr.attribute_name]=”value”
- Description: colspan, href, border, height, width
1.4. Class Binding.
- Syntax: [class.class_name]=”value”
- Description: Chỉ áp dụng cho một class, sử dụng một biến Boolean, một biến kiểu
number, string để so sánh.
1.5. Style Binding.
- Syntax: [style.style_name]=”value”
- Description: Chỉ áp dụng cho một style
2. View  Component
2.1. Event Binding.
- Syntax: (event-name)=”handler()”
- Note: Trong hàm handler mặc định nhận một tham số $event là đối tượng sự
kiện | handler($event)
3. Component  View  Component (To Way Binding)
- Đồng bộ hóa giữa component và view
- Cần import FormsModule từ ‘@angular/forms’ và khải báo trong imports ở file
module
- Khai báo trong thẻ input [(ngModel)]=”valueBinding”
- Note: Nếu thẻ input đặt trong form thì cần thêm
[ngModelOptions]="{standalone: true}".
II. Build-in directives (Component, Attribute directive, structural direactive)
- Là một thành phần mở rộng HTML, hay nói cách khác là thuộc tính (properties)
của các thẻ HTML mà Angular nó định nghĩa thêm, vì nó của riêng Angular nên
phải tuân thủ theo nguyên tắc.

+ Structural directives

 ngIF  else
Systax: *ngIf=”condition”
Dùng để thêm hoặc xóa một phần tử
Mở rộng: *ngIf=”condition; else elseBlock”  Trường hợp ngược lại sẽ hiển
thị elsBlock
Ex: <h3 *ngIf=”condition; else elseBlock”>Hợp lệ</h3>
<ng-template #elseBlock>
<h3>Không hợp lệ</h3>
</ng-template>
 ngFor
 Syntax: *ngFor=”let item of list; let i = index”
 ngSwitch

+ Attribute directives

 ngClass
 ngStyle