#57 Делаем приложение интерактивным при помощи Angular и RxJs.
Прокачай свое приложение. Разреши пользователю настраивать размеры отдельных частей интерфейса. Часто это используется в таких приложениях как gmail, figma, pgAdmin и других подобных продуктах. С помощью Angular и RxJs это можно сделать буквально в 15 строчек кода.
Записывайтесь на курсы школы ИТ лидеров https://growleader.ru
Идея создания
При создании этого компонента я смотрел идеи у Инкина Александра. В его примере можно редактировать ширину столбцов таблицы. Мне же потребовалось создать, то, что позволит мне изменять ширину и высоту, плюс покрыть это все тестами. И в конце мне захотелось иметь возможность использовать палитру из Angular Material в этом компоненте, чтобы не выбиваться из общего дизайна продукта.
Реализация
Первым шагом я создал новый проект, подключил angular material и добавил кастомную тему.
Интерактивным элементом компонента будет вертикальная или горизонтальная полоса. Доработаем директиву. С помощью оператора fromEvent из RxJs события этого элемента будут преобразованы в observable цепочку. Все начинается с события mousedown, после чего мы обрабатываем поток от mousemove до тех пор пока не произойдет mouseup. Mousemove возвращает новую ширину и высоту элемента и эти данные эмитится в Output.
Доработаем компонент. Теперь он принимает параметр от которого зависит отображение интерактивного элемента и изменения ширины или высоты. С помощью HostBinding будут устанавливаться стили ширины или высоты компонента хоста.
Добавим представление компонента. В зависимости от параметра позиционирования будет отображаться или горизонтальная полоса или вертикальная.
Добавим стили и тему из material. Тут содержатся базовые стили и миксин для применения цвета из палитры темы.
Добавим тесты. Для этого будем использовать стандартные Angular инструменты. Тест будет создавать компонент, у которого можно менять размеры. Для изменения размера нужно имитировать действия мыши, для этого можно воспользоваться браузер API MouseEvent. После нужно вызвать dispatchEvent у элемента и проверить, что размер элемента изменился.
Посмотрим результат.
Материалы и ссылки
Исходники можно скачать тут .
Подписывайтесь на мой канал телеграм о фронтенде, ui и ux front_ui_ux.
Ставьте клапы и подписывайтесь, ведь это приятно и мотивирует на новые материалы!
Заключение
Записывайтесь на курсы школы ИТ лидеров https://growleader.ru
В конце я хотел бы пожелать вам не останавливаться на изучении react angular или vue. Смотрите на веб разработку шире:
- следите за Browser API, он постоянно развивается и появляются новые классные вещи.
- смотрите приемы RxJs на фронтенде, этот инструмент независимо от фреймворка сделает многие вещи удобнее.
- изучайте инструменты тестирования и devtools. Они сделают ваш продукт качественней и производительней.
