🌳 Улучшение
Angular templatesНедавно собрали различные предложения по улучшению Angular templates. В ближайшем митинге их рассмотрят. Ниже я постарался собрать наиболее интересные предложения, если вы заинтересованы во внедрении этих фич думаю стоит зайти и проголосовать за них, или же написать отзывы в комменты.
К сведению, есть доклад как рассматривают различные PR в Angular Team: Angular Connect
YouTubeНиже я постарался собрать наиболее интересные предложения, если вы заинтересованы во внедрении этих фич думаю стоит зайти и проголосовать за них, или же написать отзывы в комменты.
Деструктуризация различных типов объектов:
38807
<div *ngFor="let { key as country, value as poi } of countryPoiMap | keyvalue">
<div>{{ country.name }}</div>
<div>{{ poi.name }}</div>
</div>
Оператор in в шаблонах 38560
<div *ngIf="'a' in item">
I'm expecting item is no longer of type A | B, but only A
{{item.a}}
</div>
Совместимость с ES Optional Chaining 34385Как вы знаете эта фича в шаблонах, появилась задолго до того как фича была в спеке.
Например выражение
a?.b в Angular означает
null == a ? null : a.b по спеке же
a == null ? undefined : a.b , ну и различные изменения в этом духе.
Внедрение директивы *ngLet 15280Фичу ждем уже 5й год, посмотрим. Напомню, ее реализация есть в различных либах, таких как
ngxs, rx-angular/templates, ngxf
<div *ngLet="userStream|async as user">...</div>
Input Output Spreads 14545html
<my-component [prop1]="prop1" {...otherInputs} ></my-component>
Поддержка стрелочных функции 14129Сомнительное предложение как по мне. Согласен с утверждением в
коментах.
<select [compareWith]="(a, b) => a.id == b.id" [(ngModel)]="selectedCountries"> ...
Деструктуризация значений из *ngIf as 27555
<div *ngIf="thingAndOther$ | async as {thing, other}">
Cold event streams 13248Предложение настолько устарело, что синтаксис компонентов еще с Angular 2 beta. Суть предложения, создать EventStream только в момент подписки, особенно ок для Output, и + не будет лишний раз дергать CD. В целом похож на одно из предложении из
rx-angular/templates Так же в комментах указали на одну либу, пример:
<button (*click)="clicks$; $event = 'custom payload'">Click Me</button>
@Component({...})
export class MyComponent implements OnInit {
@ObservableEvent()
clicks$: Observable<any>;
ngOnInit() {
// we can either manually subscribe or use the async pipe
this.clicks$.subscribe(console.log);
}
}
Полный список предложений:
43485
