Angular Input Output декораторы и как сделать двустороннее связывание в компоненте

Рет қаралды 8,879

Күн бұрын

Компонент это немного верстки и немного JS кода. Компонент должен отвечать SOLID принципам и быть легко переиспользуемым. Input позволяет принимать конфигурации от родителя, а Output позволяет сообщать родителю о событиях в компоненте.
Как работать с Input и Output в Angular мы рассмотрим в этом видео.
В этом видео рассмотрим как сделать двустороннее связывание без использования FormsModule
==============================
Код готового урока:
-- я забыл его сохранить, пиши в комментарий и я востановлю его по возможности, если будут запросы --
==============================
Инструкция по установке 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 #input #output #bindings
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:25 - Подготовка к уроку
00:58 - @Input() декоратор Angular
02:40 - TypeScript ?: и !: что это?
04:23 - constructor vs ngOnInit вопрос для собеседования
05:51 - Передаем инпут от родителя
07:09 - @Output() декоратор Angular
09:47 - Передача параметра $event
11:05 - Типизация события Angular
12:03 - @Input(alias) маппинг инпута
13:24 - Двусторонний байндинг. Реализация счетчика
16:20 - Краткий итоговый гайд

Пікірлер: 60

@grommaks 2 жыл бұрын

Привет всем) Приятного просмотра Если вы тут случайно, то стоит начать с первого плейлиста :) kzfaq.info/get/bejne/f9iVn7WHz6_YpHU.html

@EtoBARAKUDAvasa 2 жыл бұрын

Спасибо, что продвигаешь ангуляр.

@diatm1506 2 жыл бұрын

Спасибо что тратите на нас время, и готовите отличный материал!

@grommaks 2 жыл бұрын

Спасибо за комментарий) 👍

@dimzinnatov7242 Жыл бұрын

Про суффикс Change для двухстороннего связывания узнал только от тебя))) Спасибо за уроки))

@tuku_mann 2 жыл бұрын

Очень крутые уроки, спасибо большое!

@user-jg6kk8de8s 3 ай бұрын

спасиб, за подытоживание в концовке - лайк

@russianstan 2 жыл бұрын

Максим, спасибо большое за урок! Очень качественная и емкая подачи информации. Небольшая просьба, - в названии ветки в гитхабе указывать номер урока, так проще будет его найти

@grommaks 2 жыл бұрын

Уроки не нумеруются, как добавлю нумерацию, то ветки буду тоже нумеровать) В идеале ссылка на урок должна быть в ReadMe.md в гитхабе, чтобы получать просмотры с гитхаба...но пока это сложно регулировать А так в описании под каждым видео я прикрепляю ссылку, но в этом видео ветки еще нет :)

@vichislav_tv 2 жыл бұрын

спасибо за отличный урок!

@ilgul9177 2 жыл бұрын

Отличный урок.

@user-tt3bk7dw2z Жыл бұрын

Дуже дякую тобі за такий гарний контент, просто скарб 🔥

@user-glory-of-ukraine 2 жыл бұрын

Ого супер, дякую!!! Як для чайника, як я масса нового!!!)

@rockyshwilly Жыл бұрын

Спасибо большое за Ваши видео, Максим! Вы понятно объясняете как сделать так, чтобы оно работало, но очень не понятно почему оно так работает) Связи для новичка не очевидные, понимание как это еще можно использовать так и не появляется) Короче сложно без объяснения почему оно так работает)

@serdotsenko 2 жыл бұрын

спасибо! очень доступно для понимания! продолжай! на моно закинул )

@grommaks 2 жыл бұрын

Спасибо за поддерку)

@nouchance Жыл бұрын

Spasibo Brat

@Olga-gb8vz 2 жыл бұрын

Восстановите, пожалуйста, код готового урока. очень нужно)))

@grommaks 2 жыл бұрын

Так быстро(( я думал будет неделька хотябы)

@Fomenko1978 2 жыл бұрын

Спасибо

@yevhenpantiukhov3621 2 жыл бұрын

Классное видео. Большое Спасибо за ваш труд. Одного не понял, в примере с двухсторонней связью как в родительском компоненте получить доступ к значению каунтера, или проще говоря как добавить в коде вывод результата и в родительском компоненте (это ж типа двухсторонняя связь, должно ж быть доступно)

@grommaks 2 жыл бұрын

Спасибо за отзыв, вывести в фигурных скобках значение и все) [(ngModel)]=“counter” Это чтобы связать с версткой или дочерним компонентом {{ counter }} это чтобы вывести значение в верстке

@yevhenpantiukhov3621 2 жыл бұрын

@@grommaks Все так было просто что аж запутался))) большое спасибо) кнопка добавить в родительском, отнять в дочерном, вывод в трех синхронно (еще один добавил шоб мало не показалось).

@AlexanderGrinvald Жыл бұрын

Отличный урок, а есть Код готового урока?

@grommaks Жыл бұрын

К сожалению тут я забыл сохранить код готового урока

@leonidsimakov859 2 жыл бұрын

Ангулар - топ, как и Ваши ролики)

@grommaks 2 жыл бұрын

Это я пока разминаюсь) Уже записаны остальные видео из плейлиста Там есть очень интересный материал, пока готовил сам изучил детально темы которые не достаточно понимал)

@leonidsimakov859 2 жыл бұрын

Ждём👨‍🎓

@leonidsimakov859 2 жыл бұрын

Будет что-то про DI?

@grommaks 2 жыл бұрын

@@leonidsimakov859 В плейлисте по компонентам не будет DI Плейлист о сервисах будет содержать информацию о DI И возможно обновленный плейлист по DI выпущу как основные закончу

@awesomeuser789 2 жыл бұрын

Спасибо, Круто! Подскажите, это похоже на концепцию FLUX-КРУГОВОРОТА? То есть мы меняем данные наверху (в родительской компоненте, а она скидывает данные нам?(

@grommaks 2 жыл бұрын

Вниз спускаются данные, вверх идут события Поток данных однонаправленный как и в реакт или вью Каждый компонент может иметь своё собственное состояние Не вспомню сейчас что во flux, но в Редакс у нас источник истины

@awesomeuser789 2 жыл бұрын

@@grommaks Спасибо)

@murakami374 2 жыл бұрын

Максим, не подскажешь, как сделать так чтобы при двойном клике на метод оно переходило к его "внутренностям", просто у меня плагин emmit установлен, и делал вроде все как у тебя начиная с первого плейлиста по ангулар

@grommaks 2 жыл бұрын

В видео о настройке VS Code я показал как у меня настроено И есть видео о WebStorm там из коробки все работает Плейлист называется IDE можно там найти видео у меня на канале

@infinity-w 10 ай бұрын

Интересно ещё если рассказали бы, как при получении в foo условного 'true' вызывать в нем определенный метод.

@grommaks 10 ай бұрын

В видео по жизненному циклу, ngOnChanges это рассказал :) kzfaq.info/get/bejne/odGIYJqJqNy8gH0.htmlsi=s_8ecIq6kYaIFZbI

@infinity-w 10 ай бұрын

@@grommaks Огромное спасибо за Ваши видео и обратную связь! Ещё подскажите, у вас где-то есть объяснение как работать с этим: sanitizer.bypassSecurityTrustHtml ?

@grommaks 10 ай бұрын

@@infinity-w такого видео еще нет :)

@YevhenZhuchenko 2 жыл бұрын

Привет, спасибо огромное за видео! Хотел уточнить по опциональному/обязательному параметру. На сколько я знаю, title!: string; (восклицательный знак) не гарантирует, что параметр будет передан, мы по сути говорим ТСу, что мы точно его передадим, и он не чекает это. Потом мы ничиге не передаем, при компиляции ошибки нет, но она будет в браузере. А можно ли сделать именно так, как ты сказал, чтобы, если не передать параметр, ТС ругнулся при компиляции?

@grommaks 2 жыл бұрын

Привет, вроде можно, но прям сейчас не отвечу как, толи плагин на вебшторм, толи Линтер настроенный, толи в определенных версиях ангулар это было на спец конфиге…нужна помощь зала)) много проектов разных версий и пока пишу код то на шторме то на вскоде и на этот момент подзабил…вот бы кто подсказал ниже 👇

@AnnaValyaeva 2 жыл бұрын

@@grommaks я когда хочу гарантировать, что Input будет, просто проверяю в ngOnInit, и если не передан параметр, то выкидываю ошибку. думаю такое имеет смысл делать в компонентах, которые действительно много раз переиспользуються, например в юайных обертках

@grommaks 2 жыл бұрын

@@AnnaValyaeva Согласен, надежность это доп расходы на проверках и времени написания кода...везде нужен баланс, логика Ваша мне нравится) я бы тоже в общих компонентах прокидывал бы ошибки

@romankotenko9789 Жыл бұрын

Privet. Na 14:04 "vazhnyj moment chto Output dolzhen soderzhat sufix Change". Pochemu? V dokumentacii Angular ne nahogu etogo

@grommaks Жыл бұрын

Плохо искали значит) For two-way data binding to work, the @Output() property must use the pattern, inputChange, where input is the name of the @Input() property. For example, if the @Input() property is size, the @Output() property must be sizeChange. angular.io/guide/two-way-binding#how-two-way-binding-works

@romanryaboshtan9270 2 жыл бұрын

Привет, что ты думаешь о стартапах? Мне сейчас предложили работать в стартапе, стоит ли соглашаться?

@grommaks 2 жыл бұрын

Никогда не работал в стартапе, но знакомые работали в стартапе, но там был реальный бизнес за плечами, они просто выходили в веб с инновационной идеей Мне сложно что либо советовать, но попробую Я бы согласился при условии что все да - У меня есть подушка денег на пол года - год на случай проблем на рискованном проекте - ЗП там будет реальными деньгами, а не опционами или фантиками, при условии, что я не понимаю, что это за тематика и не знаю рынка - Если я знаю рынок и понимаю что это пушка-ракета и я буду партнером - Если за стартапом стоит либо очень опытная команда разработчиков по стартапам, либо там стоит реальный бизнес с деньгами большими чем цена стартапа (как в описанном мною примером) Я бы не пошел если: - Ребята делают первый стартап в их карьере - Ребята не IT специалисты и пытаются стать айтишниками через этот стартап Но это мое мнение, которое может быть не правильным

@romanryaboshtan9270 2 жыл бұрын

@@grommaks спасибо за развёрнутый ответ и честность

@mrshk_vv 2 жыл бұрын

На счёт операторов ! и ? очень спорно. Фича так себе будет очень путать и джунов и сеньеоров . Инпут все равно можно задать опциональным.Можно сделать это таким образом “@Input() title = “” “ .

@grommaks 2 жыл бұрын

Для примитивов согласен что так можно, но как быть с объектами? А ? И ! Это не только об инпутах, это больше о typescript, есть более служебные места, ConentChildren (скоро выйдет видео по этому поводу)

@murakami374 2 жыл бұрын

извините за еще один вопрос, у меня ошибка (((Can't bind to [(counter)] since it is not provided by any applicable directives))) , почитал на Stack Overflow пишут что надо подключить FormsModule, но они у меня подключены , не понимаю в чем проблема, вроде все делаю как на ролике

@grommaks 2 жыл бұрын

Все верно подсказывают, нужно перепроверить, думаю может быть опечатка или FormsModule взят не с @angular/core

@murakami374 2 жыл бұрын

@@grommaks он взят из @angular/forms, но меняя это на @angular/core, появляется ошибка, :(

@grommaks 2 жыл бұрын

@@murakami374 значит я ошибся и @angular/forms это правильное решение

@murakami374 2 жыл бұрын

@@grommaks но прикол в том, что все равно не работает 😓

@grommaks 2 жыл бұрын

@@murakami374 под каждым уроком в описании есть ссылка на гитхаб с полным кодом выполненного урока, можно сравнить своё и мое решение :)