Структурные и атрибутные директивы. Новые @if @for Content Flow Angular 17 | Angular курс

Курс по Angular 17 2024 для начинающих

В данном уроке разбираем атрибутные и структурные директивы Angular, а так же новый content-flow из Angular 17

// ссылки

Таймкоды:
00:00 Что такое директивы
01:56 *ngFor
11:47 @for
17:53 *ngIf
22:01 @if
23:44 ngSwitch
28:01 @switch
28:56 Атрибутные директивы
34:31 Концовка

#angular #typescript #программирование #курс #дажеинестараюсь #динс

[МастерБицепс]

Попал на работу где Ангуляр, вот догоняю на ходу )) Спасибо за контент

[FrontendDeveloper-iy]

Бро, не забрасывай этот курс. У тебя очень хорошо получается преподносить сложную информацию простыми словами. Жду новых видео!!!
P.S. А будет ли какой-нибудь длинный видос в котором все эти знания закрепим на практике, каком-нибудь конкретном проекте, типа "блог на Angular 17" или "магазин на Angular 17"? Очень хотелось бы увидеть такое

[ЕвгенияОдесса-уи]

Спасибо! да, интересна разница в работе ngFor / @for и т.п

[kirillsankov]

Урок супер понятный получился! Спасибо за твою работу, скоро добъем 400 подписчиков) Буду олдом этого канала)

[amirichisomadinov]

Более года работаю с Angular. На дворе уже Конец Мая 2024 года.... И только что понял, в 5:50 минуте, чтооо я все это время использовал ngFor неправильно и даже не думал об этом(Я о том, что блок дива дублируется постоянно, это ж пипец просто.... ).... Пипец... Спасибо за это)) сердечко и лайк)

[frontend_coder]

27:19 [ngSwitch]= "CurrentColor", это мы задаем переменную/значение, с которым мы будем работать, а *ngSwitchCase="'red'", это функция, которая уже что-то делает

Знаю, что не очень понятно, но если поднапречь мозг, можно понять, что я написал

[n_ma_D]

Марафоню плейлист, это просто щикарно!

[ФаяАхтямова]

Спасибо за такое крутое и простое объяснение!

[mestacey]

Автору огромный респект! Суперовский курс! Спасибо!

[Николай-бк]

Комент для продвижения. Спасибо тебе автор!

[НикитаВ-ту]

все круто! спасибо за хорошую и простую подачу материала!

[BillGadov]

Уроки хорошие Вот )))
Спасибо Вот )))

[smersh-root]

По интерактиву с ngSwitch.
Оставил процесс размышлений ниже, вдруг там есть зерно правды что отбросил, но итог думаю:
ngSwith в таком виде пишется, потому что: не создает темплейт, а со свездочками - создают. И ngSwith - это "директива - набор/пакет директив".


Варианта-предположения 3-и вышло:
1. Из-за биндинга (принимает значения из ts-файла). [ngSwith] ="атрибут". Вероятно натянуто, но что-то вроде того что тут чистое получение и присваивание значения атрибута, а в тех что с * - это не чистое принятие атрибута, например для if - это в итоге true\false, для for это элемент массива, для case -это возможное значение с которым надо сравнить.
2. * создает темплейт, [] нет. Отсюда еще вариант (2.1) вариант выходит, что ngSwith отличается по типу директивы от if\for\case.
2.1.(пока второй писал - придумал еще один) ngSwith - это директива - набор директив. Названия придумывают люди и решили назвать структурированный пакет директив - директивой :D
Зато 3-ий уже кажется чересчур притянутым зауши и вообще развитием первого варианта - if\for\case - это директивы которые реально меняют что-то, а swith только принимает в себя значение и никак на него не влияя передает другим директивам под изменения. Т.е. swith просто приемник, а те что со * - что меняют структуру.

[IvanDev-bt]

Я не могу понять почему так мало просмотров все доступно и интересно ! Я англ источники привык смотреть, но зачем если тут хороший курс базы.

[javaDocent]

ngSwitch не стурктурная директива. Это своего рода контейнер или контекст, в котором будет применяться структурные директивы case. Т.е. директивы, которые могут изменять ДОМ

[xag]

Интерактивчик)) Думаю, что ngSwitch пишется в квадратных потому что нам не нужно ничего распоковывать и создавать ему ng-template. А вот с *ngIf это работает, потому что нам нужно раскрыть элемент и тд и тп. В свитче этого не требуется имхо

[Ruby-foil]

Такой вопрос как я понял тут else if нету когда мы используем *ngIf, а может быть такое что создать свой кастомный директив где есть *else if по такому же принципу по которому работает ngSwitch? Я пока новичок в этом, если что простите за глупую мысль))

[VitalyVasilega]

Спасибо за курс. Но хотел добавить. Не нужно постоянно писать public, в ts по умолчанию все методы и проперти открыты. А вот private нужно

[danilribka]

А если я буду писать директивы так @if, else, else if будет нормально?