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

[@grommaks]

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

[@EtoBARAKUDAvasa]

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

[@diatm1506]

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

[@grommaks]

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

[@dimzinnatov7242]

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

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

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

[@russianstan]

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

[@grommaks]

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

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

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

[@nouchance]

Spasibo Brat

[@user-glory-of-ukraine]

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

[@ilgul9177]

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

[@tuku_mann]

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

[@vichislav_tv]

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

[@rockyshwilly]

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

[@serdotsenko]

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

[@grommaks]

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

[@Olga-gb8vz]

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

[@grommaks]

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

[@AlexanderGrinvald]

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

[@grommaks]

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

[@infinity-w]

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

[@grommaks]

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

[@infinity-w]

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

[@grommaks]

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

[@yevhenpantiukhov3621]

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

[@grommaks]

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

[@yevhenpantiukhov3621]

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

[@awesomeuser789]

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

[@grommaks]

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

[@awesomeuser789]

@@grommaks Спасибо)

[@leonidsimakov859]

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

[@grommaks]

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

[@leonidsimakov859]

Ждём👨‍🎓

[@leonidsimakov859]

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

[@grommaks]

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

[@murakami374]

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

[@grommaks]

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

[@Fomenko1978]

Спасибо

[@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

[@YevhenZhuchenko]

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

[@grommaks]

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

[@AnnaValyaeva]

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

[@grommaks]

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

[@romanryaboshtan9270]

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

[@grommaks]

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

[@romanryaboshtan9270]

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

[@mrshk_vv]

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

[@grommaks]

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

[@Brinzovik]

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

[@murakami374]

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

[@grommaks]

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

[@murakami374]

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

[@grommaks]

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

[@murakami374]

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

[@grommaks]

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

[@ДарьяЮдина-ж1н]

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

[@grommaks]

Согласен, надо быть современным в высказываниях