Đầu năm 2017, Angular đã phát hành Angular 4. Trong bài viết này chúng ta cùng tìm hiểu Angular 4 có gì mới.

Nhỏ gọn và nhanh hơn

View Engine

Angular 4 thực hiện thay đổi theo mã AOT. Những thay đổi này làm giảm 60% kích thước các thành phần.

Animation Package

Bỏ animations ra khỏi @angular/core và đóng gói riêng. Thế có nghĩa là nếu bạn không dùng đến animations thì nó sẽ ko được sinh ra trong sản phẩm của bạn. Thay đổi này cho phép bạn dễ dàng tìm kiếm tài liệu và tận dụng tính năng tự động hoàn thiện

Tính năng mới

Cải thiện *ngIf và *ngFor

Mẫu cú pháp binding hỗ trợ thêm nhiều thay đổi hữu ích. Bây giờ bạn có thể sử dụng cú pháp kiểu if/else và gán biến cục bộ ngay trong ngFor.

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count; index as i" [user]="user">
User {{i}} of {{count}}
  </user-profile>
</div>
<ng-template #loading>Loading...</ng-template>

ngIf

Form với Else

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

Form với then và else

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>

Form lưu trữ dữ liệu

<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

ngFor

Cú pháp đơn giản

<ul>
  <li *ngFor="let item of items">
    {{item}}
  </li>
</ul>

<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>

NgComponentOutlet và NgTemplateOutlet

• Cú pháp đơn giản:

<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>

• Tùy chỉnh nội dung

<ng-container *ngComponentOutlet="componentTypeExpression;
                                  injector: injectorExpression;
                                  content: contentNodesExpression;">
</ng-container>

• Tùy chỉnh ngModuleFactory

<ng-container *ngComponentOutlet="componentTypeExpression;
                                  ngModuleFactory: moduleFactory;">
</ng-container>

Tương thích với TypeScript 2.1 and 2.2

Cập nhật để tương thích với bản mới nhất của TypeScript. Việc này giúp cải thiện tốc độ ngc và kiểm tra kiểu tốt hơn trong cả ứng dụng của bạn. Để tìm hiểu rõ hơn về TypeScript bạn có thể tìm hiểu thêm tại https://www.typescriptlang.org/docs/home.html