В этой статье приведу заметки к релизу Angular 13, и рассмотрим предложения по шаблонам которую будут рассматривать в Angular Team в ближайшем митинге.

????️ Angular 13

Пока изменений на первый взгляд не так уж и много, думаю добавят много при 13.1+2 как это было с 12. Я бы назвал что релиз Angular 13 это про окончательный дроп IE.

Angular:

- Поддержка number separators:

<div>Total: \${{ 1_000_000 * multiplier }}</div>

- Form status протипизировали

- Forms: Добавили методы hasValidators, addValidators, и removeValidators

Angular/CLI:

- webpack-dev-server upgrade в 4 версию

- deprecate deployUrl

- esbuild для оптимизации css глобальных стилей

- <script type=module во все скрипты, так как поддерживать IE больше нет необходимости, ранее был defer

- так как IE все, удалили сборку под es5, и из полифилов убрали

- extractCss убрали флаг и удалили не нужный loader, теперь css всегда extract

- inline google шрифтов тоже удалили в woff, (ну из за IE)

- удалены: node-sass, tslint

Angular/components:

- datepicker: добавлены material-date-fns-adapter и material-luxon-adapter, ранее был только moment-adapter

- CdkOverlay: расширение, поддержка больше типов, x,y

- cdk/table: добавили output event когда таблица отрендерена,

- virtualScroll: добавили флаг appendOnly, за счет чего не будут удалятся элементы из поля зрения, при необходимости.

- dialog: autofocus к определенному field

ну и много fix, которых долго ждали.

????️ 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 14545

<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);
  }
}

???? Плоды Angular Ivy

В настоящее время чтобы реализовать динамические компоненты в Angular есть 2 пути:

- Используя JIT Compiler, т.е. из любой строки создать компонент. Имеет в себе много недостатков, поэтому практически никто таким не занимается на проде.

- Используя ViewContainerRef, и ему подобные API, которая на самом деле не предоставляет достаточной гибкости динамического создания представлений из смеси статического HTML.

И вот появилось предложение для создания таких компонент, Imperative View & Template Composition APIs.

Пример, как это может быть

import {createView, html, component, directive, text, binding, template} from "@angular/core/compose";
import {MyYellowComponent} "./myYellow.component";

const myCustomView = await createMyCustomView({userName: 'Kahless'});

async function createMyCustomView(myContext) {
 return createView([
  html("<div>some static html,</div>"),
    component(MyYellowComponent, { projection: [
      text("html string followed by a binding"),

      // {{ userName }}
      binding(() => myContext.userName),
...
}

На самом деле, это скорее будет скрыто под каким либо wrapper, никому не охота писать в стиле Incremental Dom, я думаю. Возможности конечно радуют.

p.s. Такое можно уже делать, используя инструкции Ivy, через Θ, но никто ничего не гарантирует =)



Ссылки:
- Angular Changelog
- CLI Changelog
- Список предложений по Angular Templates
- Telegram канал Angular Fanatic, с актуальной информацией про Angular: https://t.me/ngFanatic