Angular подключение стилей в компонент. Encapsulation. ViewEncapsulation

Published: 20 August 2023
on channel: Максим Гром
1,330
91

Angular компонент состоит из TS / HTML / CSS кода, каким образом можно добавить css к компоненту и какой способ чаще всего используется я показал в этом видео.
Редко когда стили пишутся на чистом css, angular позволяет использовать популярные препроцессоры из коробки, такие как sass.

В этом видео вы узнаете о трех способах подключить css к компоненту и узнаете что такое инкапсуляция стилей или ViewEncapsulation

==============================
Код готового урока:
https://github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист:    • Как работает WEB. Место и задачи Angular н...  
Вариант 2:
https://github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================

Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code:    • VS Code extensions для работы с angular пр...  
WebStorm:    • WebStorm работа с angular проектом и GIT. ...  

Архитектурные елементы Angular    • Angular архитектурные елементы. Что есть в...  
Основы RxJS    • RxJs Теория: Observable, Observer, Subscri...  
Подробнее об OnPush    • ngOnChanges vs ngDoCheck. ChangeDetectionS...  
Немного старого видео об иммутабельности    • Immutable. Неизменяемость данных JavaScript  


Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке:    • Что такое SQL? Как работать с WebSQL? Осно...  

Спасибо что продолжаете смотреть меня и радовать комментариями.

---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
https://t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube

----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе    / @grommaks  

#directives #angular #grommax

Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://forms.gle/ZbFCKJSpDNYp4AMC6

Оглавление
00:00 - Введение
00:22 - Настройка проекта
00:33 - Encapsulation стилей в компоненте
02:24 - Как работает инкапсуляция стилей
03:58 - Как компонент добавляет стили в HTML
04:38 - Тег style в *.component.html
04:59 - Подключение css по ссылке в компонент
05:51 - Подключение стилей как строка в *.component.ts
06:21 - Приоретет добавления стилей
08:05 - Краткий гайд


On this page of the site you can watch the video online Angular подключение стилей в компонент. Encapsulation. ViewEncapsulation with a duration of hours minute second in good quality, which was uploaded by the user Максим Гром 20 August 2023, share the link with friends and acquaintances, this video has already been watched 1,330 times on youtube and it was liked by 91 viewers. Enjoy your viewing!