Загрузка страницы

Angular структурные директивы, отличие от атрибутивной

Чем отличается структурная диектива от атрибутивной? Все дело в звёздочке! Рассмотрим как создать структурную директиву и как с ней работать как с атрибутивной.
В этом видео рассмотрим как передать параметры в структурную директиву, как получить значения из директивы назад

Structural directive in Angular это когда мы используем обычную директиву с префиксом звездочки
Больше информации в видео и в официальной документации https://angular.io/guide/structural-directives
==============================
Код готового урока:
https://github.com/MaksymGrom/angular-example/tree/direcitve_structure-directive
==============================
Инструкция по установке 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

Архитектурные елементы Angular https://youtu.be/7ATmJwL8NrA
Основы RxJS https://www.youtube.com/watch?v=5iIlWkWzsAE&list=PL4rYLeYunVf0aGMDMtL2a6Qe9_haMv6t7
Подробнее об OnPush https://youtu.be/kkX-7XCvXPI
Немного старого видео об иммутабельности https://youtu.be/8f-NMqKvmYw
Не забываем что 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) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе https://www.youtube.com/channel/UClDDVLu0Cj_o9Y5D2ilCtdQ/join

#directives #angular #grommax

Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://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 - Краткий гайд

Видео Angular структурные директивы, отличие от атрибутивной канала Максим Гром
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
23 июля 2023 г. 14:00:07
00:19:40
Другие видео канала
Shared Module - любимый антипаттерн angular разработчиков. Как он влияет на размер бандла?Shared Module - любимый антипаттерн angular разработчиков. Как он влияет на размер бандла?Angular standalone component. Private component. Как перейти от модулей к standalone componentsAngular standalone component. Private component. Как перейти от модулей к standalone componentsAngular специальные селекторы. ::ng-deep, :host, :host(), :host-context()Angular специальные селекторы. ::ng-deep, :host, :host(), :host-context()Angular Directives. Передача ng-template через структурную директиву в Table Component часть 2Angular Directives. Передача ng-template через структурную директиву в Table Component часть 2Angular Directive. Аналог Mat Table. Структурная директива для передачи шаблонаAngular Directive. Аналог Mat Table. Структурная директива для передачи шаблонаAngular async pipe своими руками (DIY). Глубокий разбор реализации async pipeAngular async pipe своими руками (DIY). Глубокий разбор реализации async pipeAngular async pipe. RxJS на новом уровне при таком подходеAngular async pipe. RxJS на новом уровне при таком подходеDate pipe angular. Локализация и настройка формата датыDate pipe angular. Локализация и настройка формата датыPipe из коробки Angular. Как найти все Pipe в проекте? Как пользоваться документацией?Pipe из коробки Angular. Как найти все Pipe в проекте? Как пользоваться документацией?Angular Pipe. Как создать пайпу и почему нужно их использовать?Angular Pipe. Как создать пайпу и почему нужно их использовать?NgAfterViewInit & NgAfterViewChecked. ViewChid & ViewChildren декораторы в AngularNgAfterViewInit & NgAfterViewChecked. ViewChid & ViewChildren декораторы в AngularAfterContentInit & AfterContentChecked. ContentChild. Как передать шаблоны без InputAfterContentInit & AfterContentChecked. ContentChild. Как передать шаблоны без InputngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в AngularngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в AngularConstructor vs OnInit где писать код? OnDestroy, все варианты отписки в компонентеConstructor vs OnInit где писать код? OnDestroy, все варианты отписки в компонентеAngular lifecycle hooks. Методы жизненного цикла компонентаAngular lifecycle hooks. Методы жизненного цикла компонентаРазработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?Разработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angularng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. AngularAngular Input Output декораторы и как сделать двустороннее связывание в компонентеAngular Input Output декораторы и как сделать двустороннее связывание в компонентеAngular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.Angular. Структурные директивы. *ngIf, *ngFor, *ngSwitchCase (structural directives)Angular. Структурные директивы. *ngIf, *ngFor, *ngSwitchCase (structural directives)
Яндекс.Метрика