Angular CDK Overlay: изучите основы

Описание: При разработке приложений на Angular вам, вероятно, в какой-то момент понадобится вызвать модальное или всплывающее окно. Иногда это легко сделать с помощью простого CSS. Но в других случаях может потребоваться добавить разметку в конец документа, перед закрывающим тегом body, чтобы оно располагалось поверх всего остального. Или, в зависимости от положения прокрутки, всплывающее окно должно открываться вверх, а не вниз.

Существует множество возможных сценариев, когда нам может потребоваться больше возможностей, чем позволяет только CSS, и именно здесь в игру вступает модуль CDK Overlay. В этом видео мы рассмотрим, как использовать модуль Overlay для создания глобального модального окна, которое размещается поверх всего остального и центрируется в области просмотра. Для сравнения, мы создадим всплывающее окно, связанное с кнопкой, которая автоматически позиционируется в области просмотра в зависимости от положения прокрутки. Итак, приступим к делу.

-----------------------------------------------------------------------------------------------

📺 Другие обучающие видео по Angular CDK Overlay:    • The Angular CDK Overlay  

-----------------------------------------------------------------------------

🔗 Ссылка на демо:
https://stackblitz.com/edit/stackblit...

------------------------------------------------------------------------------

📖 Главы:
0:00 - Введение
1:21 - Создание модального окна с помощью Angular CDK Overlay Service
1:42 - Установка Angular CDK
1:49 - Импорт готового CSS для Angular CDK Overlay
5:26 - Как настроить параметры Angular Overlay с помощью пользовательского объекта Overlay Config
6:32 - Как закрыть Angular Overlay по щелчку на фоне
7:24 - Создание всплывающего окна с подключенной позицией Angular Overlay
8:21 - Использование директив cdkOverlayOrigin и cdkConnectedOverlay
10:18 - Как настроить параметры Angular Connected Position Overlay с помощью входов и выходов cdkConnectedOverlay

-----------------------------------------------------------------------------

#angular #angulartutorial #cdk