Шаблоны Angular PrimeNg

Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной функции ngTemplateOutlet.

Это просто применение существующего контента от Josh Morony . Он снял видео об этом здесь , видео основано на самом PR.

Видео Josh посвящено созданию собственного компонента Table и его настройке с помощью всех инструментов, которые предоставляет Angular, например, знаменитого ngTemplateOutlet.

Здесь мы хотим применить этот метод к существующей библиотеке компонентов, которой является PrimeNg Table. В дальнейшем мы сможем использовать этот метод с любым компонентом PrimeNg, который использует ng-template для настройки.

Итак, для начала мы создадим новое приложение Angular.

ng new prime-template-context-guard --style scss --routing

Теперь мы просто устанавливаем PrimeNg

npm i primeng@14 primeicons@6

И применяем css PrimeNg в angular.json

"styles": [
    "src/styles.scss",
    "node_modules/primeicons/primeicons.css",
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css"
 ],

Затем мы создаем простую таблицу внутри компонента:

<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
  <ng-template pTemplate="header">
      <tr>
          <th>Code</th>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
      <tr>
          <td>{{product.code}}</td>
          <td>{{product.name}}</td>
          <td>{{product.category}}</td>
          <td>{{product.quantity}}</td>
      </tr>
  </ng-template>
</p-table>

Теперь, основываясь на том, что мы узнали из видео и официальной документации Angular , мы создаем директиву, которая будет использовать ngTemplateContextGuard :

ng g directive directives/table-row

В директиве мы планируем потреблять данные, инжектированные в компонент p-table, и использовать их для типизации контекста ng-шаблона. Поэтому мы создадим интерфейс для этого контекста, а директива будет раскрывать статический метод ngTemplateContextGuard :

import { Directive, Input } from '@angular/core';

interface TableRowTemplateContext<Titem extends object> {
  $implicit: Titem;
}

@Directive({
  selector: 'ng-template[appTableRow]'
})
export class TableRowDirective<Titem extends object> {

  @Input('appTableRow') items!: Titem[];

  static ngTemplateContextGuard<TContextItem extends object>(
    dir: TableRowDirective<TContextItem>,
    ctx: unknown
  ): ctx is TableRowTemplateContext<TContextItem> {
    return true;
  }

}

Мы применяем директиву к соответствующему ng-шаблону в p-таблице:

<ng-template [appTableRow]="products" pTemplate="body" let-product>

И тогда мы имеем именно то, что нам нужно: строго типизированные контекстные данные в компоненте PrimeNg Table:

Type checking for Angular ng-template.

И вот оно. Надеюсь, это может приземлиться в PrimeNg, так как это отличная библиотека для компов, было бы только хорошо, если бы она была родной.

Вот github для этой статьи :

GitHub - aboudard/prime-template-context-guard: Применение ngTemplateContextGuard к шаблону строки таблицы PrimeNg

А вот несколько отличных статей об использовании этой директивы в ваших собственных компонентах.

• NgTemplateOutlet Type Checking
• Сильно типизированный ngTemplateOutlet