Показывает важную информацию на странице. Может содержать подсказку, сигнализировать об изменении статуса или наличии проблемы.
У алертов два размера. Обычный размер используется по умолчанию; передайте [compact]="true" для компактного размера, который применяется в стеснённых местах — поповерах и формах.
По умолчанию алерты оформлены сдержанно и выделяются только цветом иконки. Если блок теряется на экране, то можно привлечь к нему внимание с помощью варианта с цветным фоном.
Свойство alertColor задаёт статус: error, warning, success или info (по умолчанию). Оно определяет фон в цветном варианте и автоматически окрашивает спроецированную иконку статуса, у которой не задан явный [color]: иконка окрашивается в соответствующий статусу цвет, кроме info — она окрашивается в contrast. Задайте [color] на иконке сами, чтобы отказаться от автоокраски.
Блок можно скрыть по кнопке-иконке в углу алерта. Алерт не скрывает себя сам — подпишитесь на событие (closed) (возникает при активации кнопки закрытия) и удалите или скройте алерт в своём коде. Если система сообщает о проблеме, в этом случае алерт отображается постоянно и пользователь не может его закрыть.
В алерте можно расположить ссылки и кнопки, можно отказаться от иконки и заголовка. В объемном оповещении текст можно разбивать на абзацы.
role="alert" заставил бы скринридер неожиданно зачитать содержимое при загрузке страницы.role="alert" для срочных сообщений или aria-live="polite" с aria-atomic="true" для несрочного статуса, чтобы вспомогательные технологии его озвучили. Как вариант — объявляйте сообщение через LiveAnnouncer из @angular/cdk/a11y.<span class="cdk-visually-hidden">Ошибка:</span>), а декоративную иконку статуса помечайте aria-hidden="true".<button> с доступным именем (aria-label="Закрыть"), чтобы она была доступна и управлялась с клавиатуры.<body>. Переведите фокус на логичный элемент после удаления — предпочтительно через FocusMonitor.focusVia из @angular/cdk/a11y, чтобы сохранить кольцо фокуса.