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

Компонент это немного верстки и немного JS кода. Компонент должен отвечать SOLID принципам и быть легко переиспользуемым. Input позволяет принимать конфигурации от родителя, а Output позволяет сообщать родителю о событиях в компоненте.

Как работать с Input и Output в Angular мы рассмотрим в этом видео.
В этом видео рассмотрим как сделать двустороннее связывание без использования FormsModule

==============================
Код готового урока:
-- я забыл его сохранить, пиши в комментарий и я востановлю его по возможности, если будут запросы --
==============================
Инструкция по установке angular проекта:
Вариант 1:
Вариант 2:
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================

Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:

Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.

Спасибо что продолжаете смотреть меня и радовать комментариями.

---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube

----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать

#grommax #angular #input #output #bindings

Материально поддержать канал можно следующим способом
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки

Оглавление
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 - Краткий итоговый гайд

[diatm]

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

[dimzinnatov]

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

[АккаунтАккаунт-фл]

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

[ИванЕрмоленко-ъч]

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

[russianstan]

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

[serdotsenko]

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

[glory-of-ukraine]

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

[rockyshwilly]

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

[Olga-gbvz]

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

[AlexanderGrinvald]

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

[murakami]

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

[awesomeuser]

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

[romankotenko]

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

[infinity-w]

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

[yevhenpantiukhov]

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

[YevhenZhuchenko]

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

[murakami]

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

[romanryaboshtan]

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

[e-ghst]

про отцовский ремень звучало как красный флаг 😵

[Brinzovik]

Спасибо большое за урок! очень полезная информация!
@Input @Output Angular $event EventEmitter баиндинг ангуляр инпут аутпут еммитер емитер