Angular структурные директивы, отличие от атрибутивной
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- Чем отличается структурная диектива от атрибутивной? Все дело в звёздочке! Рассмотрим как создать структурную директиву и как с ней работать как с атрибутивной.
В этом видео рассмотрим как передать параметры в структурную директиву, как получить значения из директивы назад
Structural directive in Angular это когда мы используем обычную директиву с префиксом звездочки
Больше информации в видео и в официальной документации angular.io/guide/structural-d...
==============================
Код готового урока:
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...
Архитектурные елементы Angular • Angular архитектурные ...
Основы RxJS • RxJs Теория: Observabl...
Подробнее об OnPush • ngOnChanges vs ngDoChe...
Немного старого видео об иммутабельности • Immutable. Неизменяемо...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе / @grommaks
#directives #angular #grommax
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:30 - Настройка проекта
00:45 - Определение структурной и атрибутивной директив
01:13 - Создание appRole директивы аналог *ngIf
06:28 - Как повторить директиву *ngFor
07:33 - Передача template context из директивы
10:50 - Откуда берется template
13:46 - Краткий гайд
![[ LIVE ] Rank เล่นแต่แครี่ ยาวๆถึง 100ดาว “วันนี้มีกิจกรรมลุ้นรับสกินมาบอกต่อ โก๋แก่ช็อกโกบอล x ROV”](http://i.ytimg.com/vi/5NNgkhWj57Y/mqdefault.jpg)
Давно не было видно. С возвращением.
Вау, неймовірні можливості!
Благодарю за видео! 👍
Круто, спасибо за ролик!
Привет, новый выпуск будет опубликован уже в это воскресенье
Спасибо что продолжаешь смотреть видео
Ранний доступ я тестирую, чтобы понимать инструменты youtube, пока весь контент будет доступен бесплатно всем, покупай подписку если хочешь поддержать канал и мотивировать на более частые публикации
Отличное видео, великолепное объяснение! Рад что увидел как всё работает на примере
Огромное спасибо за ваш труд!!!
Спасибо за видео. Как реакт-разрабу мне многое в новинку, но интересно и познавательно. Думаю, что нужно знать и уметь все основные фреймворки и их производные. Никогда не знаешь, куда занесет. А ангуляр, как мне кажется, на внешний вид очень суров:)
Спасибо за интересный материал и понятную подачу!
Очень хорошо подан материал, спасибо. Ждем новые видео
Автору спасибо, всё понятно объяснено.
Починаючи з 15 версії можна створювати структурні директиви за допомогою Directive Composition API і юзати NgIf як hostDirective. Було б цікаво подивитися про це відос. В багатьох випадках це б значно зменшило к-сть бойлерплейту в коді.
ngIf як hostDirective не знайшов прикладів, не думаю що це може були використано, так як структурна директива заміняє хост my-template тегом
А ось для інших задач це дуже гарний апдейт
Дякую за цю інфу, вже думаю як вирішити одну задачу на роботі завдяки цій фічі
круть. Буквально на прошлой неделе был точно такой же кейс, когда надо было при наличии лицензии отображать одно, а при отсутствии - другое. Я там мог бы просто сделать через нг-иф, но так как тогда на канале уже было первое видео о директивах, то написал директиву, которая сама ходит проверять, есть ли лицензия (меньше кода в компоненте). Вышла она у меня похуже, так как не знал о такой передаче контекста в структурных директивах, а просто инпутом передавал, но работает норм. Теперь надо будет порефактоирть)
Буду ждать обновления статуса:)
Ждём!
Спасибо за видео
Думаю директивы и пайпы пора делать исключительно через standalone: true
Это вопрос к правильности регистрации, в этом плейлисте рассматриваю как писать директиву, так как это серия видео, то стараюсь плавно вводить новое
Спасибо за труд, полезные видео. Ссылка перевода на карту не открывается.
Посмотрю позже, спасибо за инфу
Макс, трохи продвинуте відео чи це все вже має знати джун?
Це вже можна на мідла, але не всі колеги знають про ці можливості angular…
@@grommaks дякую за відповідь! Вчуся, щоб стати джуном і чесно говоря відео має рівень високий для мене) буду ще раз дивитися, щоб зрозуміти
@@grommaksбуло б краще використовувати реальні приклади,де це можна використати