Angular. Структурные директивы. *ngIf, *ngFor, *ngSwitchCase (structural directives)
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- Как сделать условие в шаблоне, или вывести в цикле значения или сделать переключатель в шаблоне, об этом и не только в этом выпуске.
Также из видео вы узнаете, что такое ng-template и как его использовать в ngIf
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
Склонируйте github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #ngIf #ngFor #ngSwitch #ng-template
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:32 - Подготовка к уроку
01:55 - *ngIf
03:31 - *ngIf Else
05:02 - Что такое * в структурной директиве
06:23 - Оператор optional chaining ?. и шаблонные переменные as
09:08 - *ngFor
10:56 - *ngFor index
11:24 - *ngFor tackBy
13:42 - [ngSwitch]
14:53 - *ngSwitchCase
15:38 - *ngSwitchDefault
16:21 - Краткий итоговый гайд
Единственное чтобы добавил так это то что в ngFor можно получить первый и последний элемент используя такие переменные как first и last, поставил лайк, топ ролик.
Ждём
Чудові уроки на найновішій версії ангуляр і приємний бонус в кінці уроку коротка версія за декілька хвилин, що також слугує гарним закріпленням.
Будь ласка продовжуй!
Лучший матерьял который нашел на русском
отличный материал!
Great job! THNX A LOT!
Видео отличное. Прям концентрат знаний на каждую минуту просмотра. На деюсь, что автор однажды создаст целый цыкл видео, охватывающий основы Ангуляр.
Работаю над этим) это видео из того самого цикла)
Ещё 9 видео по компонентам и полетим осваивать директивы)
Большое спасибо за Ваши видео, ждем продолжения уже теперь в следующем году!🙂 С наступающими праздниками!🎄
Спасибо большое за видео, по чаще бы обучалок по ангуляру
Люблю Angular! Спасибо за контент
Безмерно благодарен за уроки.
С наступающими праздниками!
С наступающими)
Спасибо за отличные ролики! Главное не останавливайся в этом нелегком, но очень полезном деле!!!
Спасибо большое за ваш курс! Он очень понятный и глубокий, и ваша манера повествования и примеры еще лучше помогают вникнуть в материал. Подскажите, пожалуйста, а продолжение про директивы, модули, сервисы не планируется больше? 😔
Спасибо за отзыв, планируется, но пока не могу назвать сроки. Есть ряд причин почему не могу сейчас продолжить снимать видео
Крутое видео, продолжайте в том же духе! Жду следующего видео))
Спасибо за отзыв)
Автор, большое спасибо за труд!
Привет всем
В видео затронул немного тему ng-template, но это далеко не все что нужно знать об этом)
Мы еще вернемся к этому
А так тема этого видео важна для новичков и требует практики, так что рекомендую создать себе проект и покрутить код самостоятельно
Приятного просмотра, с наступающими)
С наступающим! А всякие карусели, слайдеры и тд ui. Делать с помощью Custom Directive и декоратора HostListener, HostBinding обрабатывать события и тд?
@@diatm1506 Вариантов очень много, но есть универсальный. Взять готовый UI и подкрутить к тому, который хочет клиент. Благо они легко настраиваются.
Можно через директивы, можно через ContentChidren можно через cdk stepper
У директивы обработка событий идеть через HostListener, кстати и компонент такое может делать, я об этом буду говорить в этом плей листе )
@@grommaks Да проще взять готовый. Ну я для хобби, хочется повелосипедить (так приятнее) Жду следующую часть) Хотелось бы конечно переиспользовать у меня есть макет ну я пока до него не дорос. В нём есть при наведение мыши открывающиеся опции и закрывающие после отведения мыши. И они встречаются крайне часто различие только в тексте
@@diatm1506 tooltip или menu позволят это реализовать) касательно menu в этом плейлисте будет такой компонент. На базе этого компонента я поясню некоторые возможности
Возможно это будет то что нужно)
Очень информативно, сяпсибо!)
Очень классно и понятно! Спасибо.
Супер, спасибо!
закинул донат ) жду гит в вэбсторме ) очень НЕ срочно! просто включ в твой плотный график и сделай когда-нибудь
в редакторе включи пж-та отображение номера строки, что бы было удобно ссылатся на неё если возникнут вопросы
Отличное замечание, пару раз думал об этом при записи видео, но забывал сделать это после) Добавлю себе в тудушку, как пересяду с рабочего ноута, будет задача которая напоминает)
Спасибо
Sponge же)
Максим, добрый день! В видео мы добавляем метод trackBy который позволяет отслеживать по id, но при этом в html шаблоне user.id не участвует. Angular все равно свяжет user с id и не будет перерисовывать элементы?
Важно то что вернулось из trackBy) ответ, да, angular свяжет данные с их Id в этом примере
@@grommaks v trackBy ty peredajosh index, no nigde ego ne ispolzuesh. Zachem on tam? I pochemy Web storm ne delaet zamechanija o neispolzuemoj peremennoj?
@@romankotenko9789 Потому что я принял 2 параметра, index первый параметр который я не использую, но без него я не могу получить доступ ко второму параметру (user)
@@grommaks horrible ))
Не могу найти плейлист по анимации 🙈
Его нет :)
На данный момент нет новых выпусков на канале
@@grommaks Очень жаль, но спасибо за уже выпущенный контент. Очень полезно!)