Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.
Как работать с аттрибутами, классами и инлайновыми стилями в Angular я расскажу в этом видео и покажу наглядные примеры
Практика великая сила, обязательно попробуйте позадавать классы в angular самостоятельно, попробуйте менять стили по условию и применять знания с разных уроков
В этом видео я ответил на важный вопрос, как привязать data аттрибут в шаблон в angular
==============================
Код готового урока:
https://github.com/MaksymGrom/angular-example/tree/attributes-classes-styles
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: https://www.youtube.com/watch?v=IrelRVjIttA&list=PL4rYLeYunVf07_wC6VR6F_YlajK-Q8vxV&index=1
Вариант 2:
Склонируйте https://github.com/MaksymGrom/angular-example/tree/start
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: https://youtu.be/taTGYy-kgcE
WebStorm: https://youtu.be/0kTzqdi5tpk
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: https://www.youtube.com/watch?v=Bp_OHCzp7KM&list=PL4rYLeYunVf3DCrXe4XHdKAg8UJj0yzxG
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
https://t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #style #attr #class
Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:21 - Подготовка к уроку
01:08 - Байндинг Аттрибутов
02:10 - Работа с документацией Angular
04:02 - [draggable] байндинг аттрибута
04:39 - [attr.*] байндинг любого аттрибута в Angular
06:17 - Отличие attr.* и прямого байндинга аттрибута
07:57 - Байндинг классов
08:42 - [class.*] single class binding
09:33 - [class] multi binding
12:00 - Байндинг стилей
12:45 - [style.*] single style binding
14:18 - [style] multi binding
16:27 - Краткий итоговый гайд
Видео Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr. канала Максим Гром
Практика великая сила, обязательно попробуйте позадавать классы в angular самостоятельно, попробуйте менять стили по условию и применять знания с разных уроков
В этом видео я ответил на важный вопрос, как привязать data аттрибут в шаблон в angular
==============================
Код готового урока:
https://github.com/MaksymGrom/angular-example/tree/attributes-classes-styles
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: https://www.youtube.com/watch?v=IrelRVjIttA&list=PL4rYLeYunVf07_wC6VR6F_YlajK-Q8vxV&index=1
Вариант 2:
Склонируйте https://github.com/MaksymGrom/angular-example/tree/start
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: https://youtu.be/taTGYy-kgcE
WebStorm: https://youtu.be/0kTzqdi5tpk
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: https://www.youtube.com/watch?v=Bp_OHCzp7KM&list=PL4rYLeYunVf3DCrXe4XHdKAg8UJj0yzxG
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
https://t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #style #attr #class
Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:21 - Подготовка к уроку
01:08 - Байндинг Аттрибутов
02:10 - Работа с документацией Angular
04:02 - [draggable] байндинг аттрибута
04:39 - [attr.*] байндинг любого аттрибута в Angular
06:17 - Отличие attr.* и прямого байндинга аттрибута
07:57 - Байндинг классов
08:42 - [class.*] single class binding
09:33 - [class] multi binding
12:00 - Байндинг стилей
12:45 - [style.*] single style binding
14:18 - [style] multi binding
16:27 - Краткий итоговый гайд
Видео Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr. канала Максим Гром
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
#angular не может делать #treeshaking для #standaloneКак я в канаде работу искал, или лайхаки при составлении резюмеHostDirectives полезная фича angular? Миксуем директивы с компоненом. ПрактикаShared Module - любимый антипаттерн angular разработчиков. Как он влияет на размер бандла?Angular standalone component. Private component. Как перейти от модулей к standalone componentsКак обновить Angular до последней версии. Обновление простого проекта с V13 до V16Angular специальные селекторы. ::ng-deep, :host, :host(), :host-context()Angular Directives. Передача ng-template через структурную директиву в Table Component часть 2Angular Directive. Аналог Mat Table. Структурная директива для передачи шаблонаAngular структурные директивы, отличие от атрибутивнойAngular async pipe своими руками (DIY). Глубокий разбор реализации async pipeAngular async pipe. RxJS на новом уровне при таком подходеDate pipe angular. Локализация и настройка формата датыPipe из коробки Angular. Как найти все Pipe в проекте? Как пользоваться документацией?Angular Pipe. Как создать пайпу и почему нужно их использовать?NgAfterViewInit & NgAfterViewChecked. ViewChid & ViewChildren декораторы в AngularAfterContentInit & AfterContentChecked. ContentChild. Как передать шаблоны без InputngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в AngularConstructor vs OnInit где писать код? OnDestroy, все варианты отписки в компонентеAngular lifecycle hooks. Методы жизненного цикла компонентаРазработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?