Angular @HostBinding с CSS-сеткой

Вступление

Исходный код / ​​Живая демонстрация: StackBlitz 🚀

Цель статьи: изучить один из способов динамического изменения свойств сетки CSS с помощью @HostBinding декоратора Angular.

Темы статей:

  • Используйте CSS-Grid с угловыми компонентами с помощью селектора :host
  • Как динамически настроить свойства сетки CSS, такие как column-template-rows и gap, с помощью TypeScript.
  • DOM Sanitizer от Angular, почему мы должны обходить безопасность и некоторые рекомендации, которым мы должны следовать при этом.

CSS Grid (контейнер и элементы)

Наша CSS Grid будет состоять из двух компонентов Angular. Родитель / контейнер и дочерний элемент / элемент. CSS Grid - это относительно новое соглашение для написания CSS, которое позволяет нам создавать реактивные сетки для размещения и выравнивания элементов.

Используя селектор :host, угловые компоненты могут выбирать сами себя. Мы можем использовать эту концепцию для обработки наших компонентов как контейнера сетки или элемента сетки и избегать использования оболочки divs. 🎁

  • display: grid: Определяет элемент как сетку-контейнер
  • grid-template-rows: определяет максимальное количество строк и размер строки
  • grid-auto-flow: column: указывает сетке создать новый столбец (вместо новой строки), когда в нем не хватает места по вертикали.
  • gap: определяет расстояние между каждым элементом.

В нашем примере каждая строка будет занимать 1 долю пространства. Поскольку в нашем случае repeat(3, 1fr) мы указали 3 строки, каждая строка будет занимать 1/3 высоты div. Наши столбцы будут занимать место в зависимости от размера контекста.

Совет по CSS-сетке 💎

Хотите центрировать что-то вроде содержимого в наших элементах сетки? Сделайте элемент сетки собственным контейнером сетки и используйте justify-items и align-items.

.grid-item-class-name {
  display: grid;
  justify-items: center;
  align-items: center;
}

HostBinding

Теперь, когда у нас есть базовое представление о нашей сетке, мы можем получить доступ к свойствам CSS в нашем классе компонентов Angular.

Связывание хоста позволяет нам получать доступ и применять стили и классы CSS к нашему компоненту. - Мне нравится думать об этом как об обновлении свойств в селекторе :host через TypeScript.

Обновление нашей переменной HostBinding изменит значение свойства CSS для компонента. Мы можем связать это с событием, чтобы позволить пользователю обновлять нашу сетку.

Угловой наконечник 💎

Мы также можем добавлять и удалять классы с помощью @HostBinding

export class MyComponent {
  @HostBinding('class.is-valid') 
  get validValue() { return this.value.valid; }
}

Обработка событий

Теперь, когда Angular и CSS Grid объединились с HostBinding. Мы разрешим пользователю (с ограничением) обновлять grid-template-columns и gap.

Использование директивы Angular - это простой способ разрешить родственным компонентам взаимодействовать друг с другом. При нажатии кнопки мы отправим в контейнер событие для обновления привязки хоста.

Приведенный выше фрагмент выполняет следующее

  • Подписывается на обновления промежутков, обновляя промежуток на 5px по событию, что увеличит или уменьшит интервал между элементами сетки
  • Подписывается на обновления строк, обновляя первый параметр в repeat() на 1, что увеличит или уменьшит количество строк в нашей сетке.
  • Проверьте пробелы и строки, чтобы убедиться, что мы не опускаемся ниже 1 строки или 0 пробелов.
  • Использует DOM Sanitizer, чтобы мы могли передавать стиль в виде строки.

Источник кнопок и директивы можно найти на StackBlitz; они прямые и маленькие. - Контейнер выполняет всю тяжелую работу. 🏋️‍♀️

Угловой наконечник 💎

Если у родителя есть директива, все дочерние элементы родителя могут внедрить экземпляр этой директивы в свой класс Typescript.

<!-- HTML -->
<app-container appConnector>
  <app-item id="Hello"></app-item>
  <app-item id="2"></app-item>
  <app-item id="3"></app-item>
</app-container>
/* TypeScript */
export class ItemComponent {
  constructor(public appConnector: ConnectorDirective) {
   this.appConnector.eventEmitter.subscribe(...)
  }
}

Дезинфицирующее средство DOM

Есть много статей и ресурсов по изучению Angular’s ​​DOM Sanitizer.

Вот мой краткий обзор. Если мы заблокируем, где пользователь может отправлять данные и какие данные пользователь может отправлять, можно будет считать «безопасным» обход Angular DOM Sanitizer. 🧼

Мы разрешаем пользователю обновлять первый параметр в функции CSS repeat() (где). Мы ограничиваем ввод данных пользователем нажатием кнопки; мы контролируем значение, которое производит клик (что). 🔐

Заключение

  • Angular :host Selector позволяет нам рассматривать компоненты как css-grids или css-grid-items
  • Angular @HostBinding Decorator позволяет нам получать доступ и обновлять классы и стили CSS.
  • Angular очищает потенциально опасные обновления DOM. Мы должны подумать о том, где и что мы разрешаем пользователям обновлять, минуя эту функцию.
  • Спасибо за прочтение! 🎉

Ресурсы