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

Поділитися
Вставка
  • Опубліковано 18 січ 2025

КОМЕНТАРІ • 60

  • @grommaks
    @grommaks  3 роки тому +7

    Привет всем) Приятного просмотра
    Если вы тут случайно, то стоит начать с первого плейлиста :) ua-cam.com/video/IrelRVjIttA/v-deo.html

  • @dimzinnatov7242
    @dimzinnatov7242 Рік тому +1

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

  • @EtoBARAKUDAvasa
    @EtoBARAKUDAvasa 3 роки тому +10

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

  • @diatm1506
    @diatm1506 3 роки тому +9

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

    • @grommaks
      @grommaks  3 роки тому +2

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

  • @IvanYermolenkoSS
    @IvanYermolenkoSS Рік тому +1

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

  • @user-glory-of-ukraine
    @user-glory-of-ukraine 3 роки тому +1

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

  • @russianstan
    @russianstan 3 роки тому +4

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

    • @grommaks
      @grommaks  3 роки тому +1

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

  • @АккаунтАккаунт-ф7л
    @АккаунтАккаунт-ф7л 8 місяців тому +1

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

  • @tuku_mann
    @tuku_mann 2 роки тому +2

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

  • @ilgul9177
    @ilgul9177 3 роки тому +2

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

  • @nouchance
    @nouchance Рік тому +1

    Spasibo Brat

  • @vichislav_tv
    @vichislav_tv 2 роки тому +1

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

  • @serdotsenko
    @serdotsenko 3 роки тому +2

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

    • @grommaks
      @grommaks  3 роки тому +1

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

  • @rockyshwilly
    @rockyshwilly 2 роки тому +1

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

  • @Olga-gb8vz
    @Olga-gb8vz 3 роки тому +3

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

    • @grommaks
      @grommaks  3 роки тому

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

  • @leonidsimakov859
    @leonidsimakov859 3 роки тому +1

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

    • @grommaks
      @grommaks  3 роки тому +1

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

    • @leonidsimakov859
      @leonidsimakov859 3 роки тому +1

      Ждём👨‍🎓

    • @leonidsimakov859
      @leonidsimakov859 3 роки тому +1

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

    • @grommaks
      @grommaks  3 роки тому +1

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

  • @AlexanderGrinvald
    @AlexanderGrinvald Рік тому +1

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

    • @grommaks
      @grommaks  Рік тому

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

  • @Brinzovik
    @Brinzovik 2 роки тому +1

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

  • @romankotenko9789
    @romankotenko9789 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

      Плохо искали значит)
      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

  • @murakami374
    @murakami374 2 роки тому +2

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

    • @grommaks
      @grommaks  2 роки тому

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

  • @Fomenko1978
    @Fomenko1978 3 роки тому

    Спасибо

  • @awesomeuser789
    @awesomeuser789 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому +1

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

    • @awesomeuser789
      @awesomeuser789 2 роки тому

      @@grommaks Спасибо)

  • @yevhenpantiukhov3621
    @yevhenpantiukhov3621 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

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

    • @yevhenpantiukhov3621
      @yevhenpantiukhov3621 2 роки тому +1

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

  • @infinity-w
    @infinity-w Рік тому +1

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

    • @grommaks
      @grommaks  Рік тому +1

      В видео по жизненному циклу, ngOnChanges это рассказал :) ua-cam.com/video/kkX-7XCvXPI/v-deo.htmlsi=s_8ecIq6kYaIFZbI

    • @infinity-w
      @infinity-w Рік тому +1

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

    • @grommaks
      @grommaks  Рік тому

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

  • @YevhenZhuchenko
    @YevhenZhuchenko 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

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

    • @AnnaValyaeva
      @AnnaValyaeva 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

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

  • @murakami374
    @murakami374 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

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

    • @murakami374
      @murakami374 2 роки тому

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

    • @grommaks
      @grommaks  2 роки тому

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

    • @murakami374
      @murakami374 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому

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

  • @romanryaboshtan9270
    @romanryaboshtan9270 3 роки тому

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

    • @grommaks
      @grommaks  3 роки тому +1

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

    • @romanryaboshtan9270
      @romanryaboshtan9270 3 роки тому

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

  • @mrshk_vv
    @mrshk_vv 3 роки тому +1

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

    • @grommaks
      @grommaks  3 роки тому +1

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

  • @e-gh0st666
    @e-gh0st666 Рік тому +1

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

    • @grommaks
      @grommaks  Рік тому

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