Input Signals in Angular 17.1 - How To Use & Test

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 100

  • @DecodedFrontend
    @DecodedFrontend  9 месяцев назад +9

    Learn more about RxDB - bit.ly/rxdb 🚀

    • @Mego4884
      @Mego4884 9 месяцев назад +1

      The database looks useful. From what I have observed the basic free functionality isn't IndexedDB database as promoted but only the in memory storage - which is not persistent. Am I getting it right or is it some misunderstanding? Thank you in advance :)

    • @bobkelso5681
      @bobkelso5681 9 месяцев назад

      @@Mego4884 RxDB has the dexie.js storage which is for free and also stores data in indexeddb

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +1

      @@Mego4884 from what I understand, the free version utilizes Dexie.js RxStorage which is a minimal wrapper around IndexedDB. The IndexedDB RxStorage is a more advanced and performant plugin that’s unfortunately, a paid option. rxdb.info/rx-storage-dexie.html

  • @Storiada
    @Storiada Месяц назад

    Thank you! Finally, a clear and transparent explanation of how Signals work, really emphasising their benefits and practical use. I’m already on the fourth video and loving it-your content is making my life so much easier, even though I’ve been working with Angular since its early days.
    Great job, and the videos are so good produced and organised! Maybe a bit of spark in your explanation would make them even more better, cause you are really focus on the content and might be detaching to have a bit of a joke or a smile.
    Very much appreciate for the work involved in producing this videos.

  • @joemtz8478
    @joemtz8478 9 месяцев назад +24

    Angular is looking better and better

  • @gtkall
    @gtkall 9 месяцев назад +11

    This is a very welcome simplification effort from the Angular team. The code is simple and concise. I look forward to testing the update on my own!

  • @Aliakbaresmaeiliiii
    @Aliakbaresmaeiliiii 8 месяцев назад +2

    thank you man
    Im a Angualr developer over 7 year but every time i learning new stuff from you
    thank you very much man
    god bluss you

  • @wissamfehmi5814
    @wissamfehmi5814 9 месяцев назад +6

    Angular Team knows who works with Angular will stick to it so they are attracting other developers since v14 by making it more similar to other frameworks but of course better 😊
    As usual thank you for the fulfilled informative video

  • @asakurayoh3909
    @asakurayoh3909 7 месяцев назад +4

    Angular is so much better when it comes to complex, large applications. Now with all these new features, it's killing it. The more I learn about these new features the more I'm in love with Angular ❤

  • @pavlokozachuk555
    @pavlokozachuk555 9 месяцев назад +2

    What is your opinion about HttpClient and its methods?
    How do you see having its returned values as Observables and some Signals?
    What is the best way to combine values from API (Observables) with Signals in the component?

  • @kevinsuarezguzman302
    @kevinsuarezguzman302 9 месяцев назад +3

    I just needed the testing part, what a good explanation.

  • @ansaganie
    @ansaganie 9 месяцев назад +2

    Your videos make me love Angular)) Thanks!

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      That is so cool to hear that! Thank you for your feedback. It motivates me to make even more videos 🙌

  • @rakhimjonrustamov5148
    @rakhimjonrustamov5148 9 месяцев назад +1

    Nice recommendations at the end of the video!

  • @haroldpepete
    @haroldpepete 9 месяцев назад +3

    great video, thanks, what about ngModel replacement using model(), could we achieve the same result as input signal feature?

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Hi 👋 you are welcome, Thanks for your question. I should probably clarify (and maybe create a separate dedicated video) but model() is about two-way data binding, and it is a concept that is separate from ngModel (which is directive).
      So ngModel won't be replaced with model(). ngModel (most probably) will be using the model() under the hood when the implementation of the template-driven forms is migrated to the signals.

  • @jakubdrewniak2668
    @jakubdrewniak2668 9 месяцев назад +2

    quality content as always. I need to get back to it when our team migrate to ng17

  • @miklosbecsei8128
    @miklosbecsei8128 9 месяцев назад +4

    Thanks for the video! Especially the testing part helped a lot! 🙂

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      You are welcome! :) Glad it was helpfull ✌️

  •  9 месяцев назад +3

    I hope you still have those nice plants, I miss them. 😀 Keep up the good work, I like your videos.

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +1

      Hey 👋🏻 Unfortunately, I had to give away them to other careful people ☹️

  • @gagiksimonyan3782
    @gagiksimonyan3782 9 месяцев назад +2

    Your videos are always useful, Dmytro) Thank you very much

  • @MrEvilyogurt
    @MrEvilyogurt 9 месяцев назад +1

    Thanks for the guide, not a fan of the new input options but i do like that we have this to use over get/set.

  • @ranjan4elex
    @ranjan4elex 9 месяцев назад +2

    This is great the way you explain has always helped me. I have a question though is there a way to initialize the InputSignal in a dynamically loaded component?

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +1

      Hi! Thanks for your question. I didn’t try it on exactly this use case, but I am sure it is possible. To set the input value for dynamically created component use ComponentRef.setInput() method.

  • @IAmWeirdForNG
    @IAmWeirdForNG 9 месяцев назад +2

    Thank you for this simply great content 👍 Short and concise 🔥 I benefit greatly from your videos - keep it up 👣

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      That's cool! Thanks for your feedback;)

  • @innocentmazando3808
    @innocentmazando3808 9 месяцев назад +1

    I knew I would learn something here :).
    Learnt about the transformation and testing just now :)

  • @TheSysmat
    @TheSysmat 9 месяцев назад +3

    I like it with computedAsync lib

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +1

      You mean probably ngx-extention library that provides computedAsync function? :)

    • @TheSysmat
      @TheSysmat 9 месяцев назад

      @@DecodedFrontend yes

  • @frbs
    @frbs 9 месяцев назад +2

    Thank you for the great content.

  • @maciek77killer
    @maciek77killer 9 месяцев назад +1

    is it correct to send observable to the child and use input signals?

  • @matiassantiago4205
    @matiassantiago4205 9 месяцев назад +2

    great video. thanks!

  • @vojislavvukovic7376
    @vojislavvukovic7376 9 месяцев назад +2

    Hello Dmytro! Nice video as always. I was looking into your Angular Forms course and I am curious about one thing - do you have examples/lessons in that course with OnPush ChangeDetectionStrategy? Ty again, there is always something to learn from your videos :)

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Hi 👋🏻 thanks for your question. Actually, most of the examples in that course use the onPush change detection strategy and solve many problems that might appear in this Change Detection mode :)

  • @gund_ua
    @gund_ua 9 месяцев назад +1

    Damn, Angular API more and more becomes inconsistent.
    Input signal is nice, but duplicating input metadata into it from a well known @Input decorator makes no sense to me.
    I'm still not using signals because most of my reactive code in rxjs and it just seems unnecessary to convert everything to signal while I can simply pipe values through async pipe lol.
    But great overview from you Dmytro, love it!

  • @kiambojyms2196
    @kiambojyms2196 6 месяцев назад

    Js frameworks are sharing syntaxes. Computed comes from vuejs.

  • @chinmayyogi6958
    @chinmayyogi6958 9 месяцев назад +1

    Hi , is conditional bootstraping is possible in Angular? If yes then please make a video on how to do it.
    Looking forward to solution.
    Thanks 🙏🏻

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      I think I did such a video already. Please check this out - ruclips.net/video/hr8_oD60GZ4/видео.htmlsi=hs87pitgw75slOUo

  • @ddgutierrez
    @ddgutierrez 8 месяцев назад

    Hola espero que estes muy bien! Una consulta... Cuando utilizo un getter que adentro en si mismo solicita a una señal su valor y retorna el mismo. Zonejs esta escuchando si utilizo un getter? Ejemplo
    get nombreTipoDeCuentaSeleccionado(): string | undefined {
    return this.tipoDeCuentaSeleccionadaSignal()?.toString();
    }
    Es decir. si utilizo un getter para obtener el valor de una señal. Zonejs estaria ejecutando deteccion de cambios o el getter esta desacoplado de zonejs?
    Saludos!

  • @peter3818
    @peter3818 9 месяцев назад +1

    Is it possible to access injected dependencies inside the transform function? Like let's say I want to combine an input property and join it with some stateful service?

  • @ДоброеСердце-л1ц
    @ДоброеСердце-л1ц 9 месяцев назад +2

    Спасибо! Лайк не глядя

  • @nelson3391
    @nelson3391 5 месяцев назад

    Great video. Thanks a lot!

  • @kasoivasoy7808
    @kasoivasoy7808 9 месяцев назад +1

    Standalone Components + Signals almost = ReactJS&useState. Only difference is that effect() takes care of dependencies. So idk where all of these is heading to 🙃 but generally I like this approach

    • @RostY
      @RostY 9 месяцев назад

      Reactgular

    • @pavlokozachuk555
      @pavlokozachuk555 9 месяцев назад

      Google is preparing to be redeemed by Meta or vice versa

  • @vOnez212
    @vOnez212 9 месяцев назад

    Nice! Thanks for sharing.

  • @maksymbykov
    @maksymbykov 9 месяцев назад +2

    Thank you 💛💙

  • @snivels
    @snivels 7 месяцев назад +1

    So what is the point of signals? Is it to replace the use of ngModel two-way bindings?

    • @DecodedFrontend
      @DecodedFrontend  7 месяцев назад

      Signals is the reactive primitive that has much broader area where it could be applied (not only about 2-way binding). I have a dedicated video about this topic, so you can have a look - ruclips.net/video/HCg3vJpfYeg/видео.htmlsi=AXaw0n_CUkpym6KV

  • @rkrao8582
    @rkrao8582 4 месяца назад

    I am confused a bit . You mentioned that passing signals from parent to child as inputs is an anti pattern, But I dont understand why. I am working on an application with Angular 18 and I am passing signals as inputs from parent to child. Dont know what I am missing here! But great video none the less

  • @ievgensvichkar2643
    @ievgensvichkar2643 9 месяцев назад

    Good content, as usual.

  • @PavelBozhok-d4g
    @PavelBozhok-d4g 8 месяцев назад

    Awesome video! Maybe you know how to set input from another component? for example
    protected _labelRef = contentChild(LabelComponent)
    this._labelRef().required.set(true); not possible, because

  • @mrthefankyy
    @mrthefankyy 9 месяцев назад +2

    why after transforming in the template user properties name and lastname are highlighted with red hints? concatUserNames function just add new field to existing object, so the name and lastName could not disappear 🤔

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +1

      Hey 👋😊 Thanks for your question. Actually, the concatUserNames removes those properties because I destructure the name and lastName from the original user object, so in “...user” those properties are not included anymore. Then I return an already modified object and spread “…user” which means that the new object won't get the name and lastName property.

    • @mrthefankyy
      @mrthefankyy 9 месяцев назад +1

      @@DecodedFrontend Right, I just noticed that desctructering. thank you for the video and explanation!

  • @PavelBozhok-d4g
    @PavelBozhok-d4g 8 месяцев назад

    Hello, the video is awesome! Maybe you know how to set data to input signal from another component? What do I mean, for example
    In LabelComponent I have InputSignal
    required: InputSignal = input(false);
    I have a parent component ParentComponent
    protected _labelRef contentChild(LabelComponent);
    and code
    this._labelRef().required.set(false); // it not possible because InputSignal don't have set method
    Maybe you know a variant to do that with signal, I know how to do that from the old way, but try to use the signal for new features, thanks a lot!

  • @tomasroggero6559
    @tomasroggero6559 8 месяцев назад

    How do you test outputs?? such as model()

  • @gabo868
    @gabo868 4 месяца назад

    Thanks!

  • @alextimofeev8173
    @alextimofeev8173 9 месяцев назад

    Hello, somehow webstorm is not seeing those types on transform function so i am duplicating them, that is interesting because it is not and editor feature at all.

  • @amosisaila8416
    @amosisaila8416 9 месяцев назад

    Maybe you could have shown how to play with withComponentInputBinding() and Signal Inputs. Btw great video.

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Thank you :) It is a great idea! I'll add it to the list

  • @itslen
    @itslen 8 месяцев назад +1

    Is it possible to use input signals with the router?

    • @DecodedFrontend
      @DecodedFrontend  8 месяцев назад +1

      Yes! My next video is partly about that ;)

    • @itslen
      @itslen 8 месяцев назад

      @@DecodedFrontend I’ll be waiting

  • @nergrohombre
    @nergrohombre 6 месяцев назад

    I had problems with the required input and had to set it with spectator createComponent props

  • @danieldanish2453
    @danieldanish2453 9 месяцев назад +1

    how to become angular dev expert ?

  • @tryhuma
    @tryhuma 9 месяцев назад +3

    do you live in Poland now?

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Haha, no :) Why did you think so?😄

    • @tryhuma
      @tryhuma 9 месяцев назад

      @@DecodedFrontend Many Ukrainians moved to Poland after the Russian aggression. I thought about inviting you for a beer xd

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад +2

      @@tryhuma yeah, that’s an unfortunate true. However, I have been living in Austria for many years already. Anyway, I am always happy to meet in Vienna 😊

  • @moveonvillain1080
    @moveonvillain1080 9 месяцев назад

    New to Angular and I come from React. What I take away from this video is that input signals enforce unidirectional data flow similar to how React has. Only from Parent to Child and Child cannot modify unless parent provides a method for child to modify the Input coming from parent.
    Am I on right track here?

  • @dharmarajana3989
    @dharmarajana3989 7 месяцев назад +1

    We can achieve the same using behavioural subjects..why do we need signals?

    • @DecodedFrontend
      @DecodedFrontend  7 месяцев назад

      Hey,
      Yes you can. However, signals are more lightweight alternative and will be deeper integrated into Angular framework in the future.
      All new features will be optimized and developed with Signals in mind when RxJS will become eventually optional. So the Signals are more future proof solution.

    • @ChipepeYamamoto
      @ChipepeYamamoto 7 месяцев назад

      I think that subjects must be subscribed and unsubscribed and are zone js dependent. Signals in other hand do not affect the whole tree of component parent down.

  • @TheSysmat
    @TheSysmat 9 месяцев назад +1

    But ng 17.2 model is strange for me because is bound to router

  • @tangocukedi1
    @tangocukedi1 3 месяца назад

    after doing this refactoring, unit testing has become a nightmare for me because i use jest without Testbed

  • @ВладимирФомин-с4б
    @ВладимирФомин-с4б 5 месяцев назад

    Angular signals resemble MobX 🤔

  • @fawzzhkz9023
    @fawzzhkz9023 8 месяцев назад +1

  • @deeperton
    @deeperton 6 месяцев назад

    Breaking contracts of using decorators is so React-way... don't like it. Now you need a custom IDE tuning to highlight that input function to make it noticeable in the code.

  • @Noname-i4f3z
    @Noname-i4f3z 9 месяцев назад +1

    Все добре, але чому не державною?

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Дякую за коментар. Це тому, що аудиторія в багато разів менша, ніж англомовна. Плюс, більшість українців в IT сфері чудово розуміють англійську.

    • @Noname-i4f3z
      @Noname-i4f3z 9 месяцев назад

      @@DecodedFrontend так і мову втратимо( ото такі патріоти(

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      @@Noname-i4f3z Додам трохи контексту: цей канал не хобі, а моя основна робота. Якщо я перейду на українську, то втрачу аудиторію, що, банально кажучи, призведе до закриття каналу, бо в мене не буде ресурсів на його підтримку. І в чому сенс? Якщо у вас є бажання профінансувати канал таким чином, що мені не треба буде більше турбуватися за фінансування, то я з радістю почну робити контент українською.

    • @Noname-i4f3z
      @Noname-i4f3z 9 месяцев назад

      @@DecodedFrontend а чому фрілансер по життю може робити контент українською і це не призводить до закриття каналу, а Ви ні? То просто у нього є бажання, а у Вас немає нажаль...але головне що флаг показали ото така підтримка української мови це такий ваш внесок і спільну боротьбу...

  • @D9ID9I
    @D9ID9I 9 месяцев назад +1

    Such an awful pattern. Reminds me knockoutjs times.

    • @DecodedFrontend
      @DecodedFrontend  9 месяцев назад

      Hi! Thanks for your thoughts :) By the "pattern" do you mean signals in general? If yes, I would be curious to hear why exactly? (except being similar to what KnockoutJS :) )

    • @D9ID9I
      @D9ID9I 9 месяцев назад

      @@DecodedFrontend yeah, all these computed, observables were so absolutely unfun and clunky to work with back in a days. AngularJS was like a breeze after that. And I can't believe Angular downgrades back. What I see gives me bad vibes. Like they hired some brand new and ignorant Harvard boys who think they invented proper way 🤦‍♂

    • @diadetediotedio6918
      @diadetediotedio6918 5 месяцев назад

      ​@@D9ID9I
      Bro, angular has observables since version 2 if I'm not mistaken, this was like 8+ years before now. So I don't think you know better than them or the userbase about whatr is more "unfun" or whatever.