Decoded Frontend
Decoded Frontend
  • 133
  • 2 636 399
ShareReplay in RxJS - Hidden Pitfall You Have To Know (Advanced)
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend.
You’ll also get 20% off an annual premium subscription.
The ShareReplay operator in RxJS is a great way to improve the performance of your stream by caching expansive operations and side effects and sharing results with new subscribers. However, you should use this operator carefully because it has a hidden pitfall that can introduce memory leaks even though you explicitly unsubscribe from your streams. From this video, you will learn how to use it safely and how it works under the hood. Enjoy watching and sharing this video with your colleagues if you find it useful!
👉 Join our Discord Server - bit.ly/decoded-frontend-discord
👉 See All Angular Courses - bit.ly/discounted-course-bundle
Code on GitHub:
github.com/DMezhenskyi/angular-top-rxjs-mistakes/tree/shareReplay-pitfall-demo
🕒 Time Codes:
00:00 - About shareReplay;
00:01:03 - Intro;
00:02:20 - The Problem;
00:04:34 - The Solution;
00:06:25 - Extended Explanation (custom shareReplay);
00:17:00 - Brilliant Sponsorship;
00:18:00 - Discord Community Server Announce;
00:18:52 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - DecodedFrontend
Instagram - decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
This video was sponsored by Brilliant.
zhlédnutí: 478

Video

TOP 6 Mistakes in RxJS code
zhlédnutí 14KPřed 21 dnem
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend. You’ll also get 20% off an annual premium subscription. From this video, you will learn the TOP 6 mistakes developers make when writing RxJS code. Watch this video until the end, and you will see how to make your RxJS code more reliable, clear, and performant. If you find this video useful, pl...
Reactive Forms in Angular - Dynamic Validation
zhlédnutí 7KPřed měsícem
Learn Everything About Angular Forms 🚀 bit.ly/advanced-angular-forms_yt In this video about Reactive Forms in Angular, I will show you how you can apply and remove validators to certain form controls dynamically, depending on the values from other form controls in your Angular Form. I will show you how to do that using ReactiveForms. You will see which pitfalls you might encounter while impleme...
Content Projection in Angular - Complete Guide (Beginners/Advanced)
zhlédnutí 13KPřed měsícem
👉 To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend You’ll also get 20% off an annual premium subscription. In this video, besides the basics of content projection in Angular, you will also learn more advanced scenarios like multi-slot content projection, Content Re-Projection, Projection aliasing, and ngProjectAs attribute, and last but n...
RxJS Scan Operator - How to Manage the State
zhlédnutí 9KPřed 2 měsíci
Learn everything about Angular Forms 🚀 bit.ly/advanced-angular-forms-course-updated 👉 See All Angular Courses - bit.ly/discounted-course-bundle Have you ever had a use case when you had an RxJS data stream and wanted to shape some state from it? Watch this video until the end, and you will learn how you can create and manage the state right in the stream so that you can deliver data right to th...
Component Input Binding in Angular Router
zhlédnutí 8KPřed 3 měsíci
Learn everything about Angular Forms 🚀 bit.ly/advanced-angular-forms-course-updated 👉 See All Angular Courses - bit.ly/discounted-course-bundle 🕒 Time Codes: 00:00:00 - Intro; 00:01:19 - Routes handling in Angular; 00:02:14 - Idea behind Component Input Binding; 00:04:39 - Naming conflict resolution 00:05:44 - Real-life use case; 00:09:35 - Outro; 🔗 Source code from the tutorial: github.com/DMe...
Angular Model - The New Signal-Based 2-way Data Binding
zhlédnutí 20KPřed 4 měsíci
🔥 Conscious Angular Testing for Beginners with 10%-OFF (For the First 10 Students): bit.ly/conscious-angular-testing_U8YXaWwyd9k Recently, Angular 17.2 was introduced, which brings a new API that enables deeper integration of Signals into Angular components. One of these new functions is a function `model`, which enables the 2-way data binding and which one I am going to cover in this video. Yo...
Input Signals in Angular 17.1 - How To Use & Test
zhlédnutí 24KPřed 4 měsíci
Learn more about RxDB - bit.ly/rxdb 🚀 The introduction of Input Signals is another step towards the integration of Signals into Angular Framework Core. From this video, you will learn how to migrate your angular components to input signals smoothly and how to adjust your unit tests. Besides that, you will know how to make your inputs reactive even before Angular 17.1. If you find this video use...
Deferrable Views - New Feature in Angular 17
zhlédnutí 19KPřed 5 měsíci
Deferrable Views - New Feature in Angular 17
Angular Testing - New Course & Giveaway Teaser 🎉
zhlédnutí 8KPřed 7 měsíci
Angular Testing - New Course & Giveaway Teaser 🎉
Angular 17 - New Build-In Control Flow Overview 🚀
zhlédnutí 36KPřed 8 měsíci
Angular 17 - New Build-In Control Flow Overview 🚀
Scraping Data from Amazon using Scraping Browser API, ExpressJS & Angular
zhlédnutí 3,9KPřed 8 měsíci
Scraping Data from Amazon using Scraping Browser API, ExpressJS & Angular
The Role of "exportAs" Property in Angular [RE-UPLOADED]
zhlédnutí 13KPřed 9 měsíci
The Role of "exportAs" Property in Angular [RE-UPLOADED]
How to Make Forms in Angular REUSABLE (Advanced, 2023)
zhlédnutí 59KPřed 9 měsíci
How to Make Forms in Angular REUSABLE (Advanced, 2023)
Web Workers in Action - Performance Boost for Web Applications (2023)
zhlédnutí 23KPřed 10 měsíci
Web Workers in Action - Performance Boost for Web Applications (2023)
How To Make Angular Code More Reusable
zhlédnutí 27KPřed 11 měsíci
How To Make Angular Code More Reusable
Angular NgRx - How to use Feature Creator (API Overview, 2023)
zhlédnutí 17KPřed 11 měsíci
Angular NgRx - How to use Feature Creator (API Overview, 2023)
Reset Forms in Angular using Reactive Forms
zhlédnutí 11KPřed rokem
Reset Forms in Angular using Reactive Forms
Pitfalls Of Using takeUntil and takeUntilDestroyed RxJS Operators
zhlédnutí 20KPřed rokem
Pitfalls Of Using takeUntil and takeUntilDestroyed RxJS Operators
The new DestroyRef Provider in Angular 16 (2023)
zhlédnutí 12KPřed rokem
The new DestroyRef Provider in Angular 16 (2023)
Change Detection in Angular Pt.3 - OnPush Change Detection Strategy
zhlédnutí 25KPřed rokem
Change Detection in Angular Pt.3 - OnPush Change Detection Strategy
Change Detection in Angular Pt.2 - The Role of ZoneJS (2023)
zhlédnutí 20KPřed rokem
Change Detection in Angular Pt.2 - The Role of ZoneJS (2023)
Change Detection in Angular - Pt.1 View Checking
zhlédnutí 34KPřed rokem
Change Detection in Angular - Pt.1 View Checking
First look at Signals in Angular
zhlédnutí 44KPřed rokem
First look at Signals in Angular
Design Patterns in Angular Source Code - Strategy Design Pattern
zhlédnutí 17KPřed rokem
Design Patterns in Angular Source Code - Strategy Design Pattern
Design Patterns in Angular Source Code - Bridge Design Pattern
zhlédnutí 24KPřed rokem
Design Patterns in Angular Source Code - Bridge Design Pattern
Component-Less and Empty-Path Routes in Angular (2023)
zhlédnutí 13KPřed rokem
Component-Less and Empty-Path Routes in Angular (2023)
Demystifying Angular Two Way Binding (2023)
zhlédnutí 12KPřed rokem
Demystifying Angular Two Way Binding (2023)
NgTemplateOutlet in Angular - Everything You Have to Know (2022)
zhlédnutí 47KPřed rokem
NgTemplateOutlet in Angular - Everything You Have to Know (2022)
Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)
zhlédnutí 9KPřed rokem
Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)

Komentáře

  • @n8_may
    @n8_may Před 11 minutami

    Loved this approach!

  • @mansoorabdullah
    @mansoorabdullah Před 38 minutami

    If the subscriptions cause memory leaks, why Angular can't destroy it by default when onDestroy the component. It's a headache for developers to find the memory leaks

  • @TheSysmat
    @TheSysmat Před hodinou

    Very good approach 🎉

  • @DzikiMoronHackshield
    @DzikiMoronHackshield Před hodinou

    I had one more interesting example: replaysubject.pipe(switchMap(apiCall), retry()) Then when apicall will raise error then we try to resubscribe and then we have never ending cycle because replaysubject is giving value and apicall is rising error and so on

  • @D4NGRB0X
    @D4NGRB0X Před hodinou

    I found this quite helpful and would like to see more breakdowns of other operators in this way.

  • @kramatanga
    @kramatanga Před hodinou

    is not bad to use nested subscriptions ?

    • @DecodedFrontend
      @DecodedFrontend Před hodinou

      Usage of nested subscription is absolutely fine and you can not avoid it actually because very often our stream might depend on the value from other one. Just make sure that you use proper operators for that (e.g switchMap, etc) instead of doing obs$.subscribe(val => obs2$.subscribe(...))

  • @ratg97
    @ratg97 Před 2 hodinami

    takeUntil 1 line

    • @DecodedFrontend
      @DecodedFrontend Před 2 hodinami

      Take until also has its own pitfalls :) You can check it out here - czcams.com/video/eJs4EJUOnNE/video.html Also, takeUntil should be used along with Subject and ngOnDestroy hook which is already more then 1 line :)

  • @user-re1mr9bv1v
    @user-re1mr9bv1v Před 7 hodinami

    Thank you for the nice explanation and demo. well appreciated

  • @littleoddboy
    @littleoddboy Před 22 hodinami

    no one could teach deferrable views in angular better.

  • @Iam_AndersonP
    @Iam_AndersonP Před dnem

    very cool video, I was looking something similar, but not for a FormGroup but fgor a single formcontrol, and i can't get it to work with reactive forms and material inputs

  • @LoveQwertying
    @LoveQwertying Před dnem

    he or she knows ? What about they/them or zyr/zyrs

    • @DecodedFrontend
      @DecodedFrontend Před 22 hodinami

      Nothing is perfect

    • @LoveQwertying
      @LoveQwertying Před 22 hodinami

      ​@@DecodedFrontend i am joking. Good videos and presentations.

  • @eXpertise7
    @eXpertise7 Před dnem

    You're really good. This is gold. Coming from Angular Dev with 6 year experience.

  • @DecodedFrontend
    @DecodedFrontend Před 2 dny

    To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend You’ll also get 20% off an annual premium subscription.

  • @bifty9
    @bifty9 Před 3 dny

    Thank you for this great idea! I use it for loose coupled components (with routing) that work together as a generic form. But i have a problem to make the injection / parentContainer optional. So if i want to use the same component as a single form component or with a parent form. Any Optional( ) or something like deps: [[Optional, NgForm]] is not working (still get an null injection error...). Any tips how to fix that?

    • @bifty9
      @bifty9 Před 3 dny

      Ah, i got it working. I used the Optional syntax wrong. First trys was with deps: [[Optional, NgForm]] Second Try was with an @Optional before the Token. But correct syntax is this: useFactory: () => inject(ControlContainer, {skipSelf: true, optional:true}) Now it works, you only have to adjust the getter for the "parent" Container to use the local formGroup instead of the one from the parent if it not exists. Also adjust the templat to provide a parentFormgroup then. Good Day folks and thx, fopr sharing tips 🙌

  • @ievgensvichkar2643
    @ievgensvichkar2643 Před 3 dny

    Thank you for the detailed ng-content video. Always learn smth new from your videos. In current one it was - the re-projection tricks and using a directive for getting a reference to a template. Thanks.

  • @user-cx7wz9mm1q
    @user-cx7wz9mm1q Před 3 dny

    Watching all of your videos. You have improved my career so much bro, many thanks...🙏

  • @sergeymigel4680
    @sergeymigel4680 Před 3 dny

    interesting.....

  • @ThoBui-qk4yq
    @ThoBui-qk4yq Před 4 dny

    please release a video on creating a best project structure in angular

  • @nelson3391
    @nelson3391 Před 4 dny

    Great explanation. Thanks a lot

  • @vinaykadam3897
    @vinaykadam3897 Před 5 dny

    Great video! It solved my split form issue. However, do you mind addressing the test case for this as well?

  • @gsgonzalez88
    @gsgonzalez88 Před 6 dny

    Excelent explanation! thanks!

  • @weradsaoud2018
    @weradsaoud2018 Před 6 dny

    Thank you.

  • @onetwothree123-
    @onetwothree123- Před 6 dny

    For such simple scenarios imo we don't need even to write custom builder, the code can be placed right in the project, however thanks for the video it allow to understand how things work under the hood

  • @robertaliaj4908
    @robertaliaj4908 Před 7 dny

    Second video of you that I’m watching, you have a great talent making things easy to understand 👌🏼

  • @weradsaoud2018
    @weradsaoud2018 Před 7 dny

    Thank you

  • @akashwasson4220
    @akashwasson4220 Před 8 dny

    bro, you are pro! Thanks a lot!

  • @user-mk8eu1cs1g
    @user-mk8eu1cs1g Před 8 dny

    Angular signals resemble MobX 🤔

  • @rahultej8352
    @rahultej8352 Před 8 dny

    Is this source code shared anywhere?

  • @enverusta7811
    @enverusta7811 Před 8 dny

    I have a question. Let's say that I have 8 common inputs in 2 different components. I can't handle them with binding a class or something since they are all object types. How can i handle this case? Should i stick with directives or abstract component?

  • @weradsaoud2018
    @weradsaoud2018 Před 9 dny

    thank you

  • @Kobe24Geo
    @Kobe24Geo Před 10 dny

    Can you make a video about good and bad practices generally in Angular? For templates as well as ts component logics

  • @samiralholo2788
    @samiralholo2788 Před 10 dny

    You are the best, I'm top fan, Could you please make same tutorial but for material v18🙏🙏

  • @user-lc7qs7gy5d
    @user-lc7qs7gy5d Před 11 dny

    2:05 hey what about , unsubscribing !! here form.valuechanges.subs .......

  • @abdelhamidouanes9941
    @abdelhamidouanes9941 Před 11 dny

    Bravo !! Big thanks <3 bien expliqué, j'apprécie beaucoup votre efforts <3

  • @JoeBoo532
    @JoeBoo532 Před 11 dny

    Hi, could you please explain the benefits of assigning the response results to an observable instead of just using an array? Thank you! loving your vid by the way! :D

  • @oleksandr3863
    @oleksandr3863 Před 12 dny

    Observables created using fromEvent are cold observables.

  • @anhtrantruong9872
    @anhtrantruong9872 Před 12 dny

    Wonderful it's still run in my case but when i use chat-app with another root routing look like they conflicts with each other. IT'S STILL WORK FINE but when need 2 click to bootstrapModule app-chat in current app. First click return Cannot match any routes ( with current route url ) . Does anyone has any solution ? Thank you

  • @user-gz9ky5zg7k
    @user-gz9ky5zg7k Před 12 dny

    I have been working as Angular developer for more than three years and I didn't find anything new but distinctUntilKeyChanged) Anyway it is a really cool video as always and it gives good hints and advice)

  • @MythsoftheWorld-lm8oi

    Hi, What extension do you use for generate a class?

  • @nelson3391
    @nelson3391 Před 13 dny

    Thanks a lot!

  • @LuizFMPaiva
    @LuizFMPaiva Před 13 dny

    Amazing video. thanks Dmytro, u never disappoint ♥

  • @user-om4hp7me3d
    @user-om4hp7me3d Před 14 dny

    Damn, so cool !

  • @user-om4hp7me3d
    @user-om4hp7me3d Před 14 dny

    Great video, thank you

  • @enverusta7811
    @enverusta7811 Před 14 dny

    Since we might need to use those handlers in other lists too, I implemented them in a more generic way like this: ```function removeHandlerFn<T>(indexToRemove: number) { return (state: T[]): T[] => state.filter((_element, index) => index !== indexToRemove); } function resetHandlerFn<T>(event: void) { return (state: T[]): T[] => []; } function accumulatorHandlerFn<T>(value: T) { return (state: T[]): T[] => [...state, value]; } function scanHandlerFn<T>(state: T[], stateHandlerFn: (state: T[]) => T[]) { return stateHandlerFn(state); }``` Also used them like this: ```ages$: Observable<number[]> = merge( this.reset$.pipe(map(resetHandlerFn<number>)), this.remove$.pipe(map(removeHandlerFn<number>)), this.debouncedAge$.pipe(map(accumulatorHandlerFn)) ).pipe(scan(scanHandlerFn, []));```

  • @enverusta7811
    @enverusta7811 Před 14 dny

    It was really helpful!

  • @dev-gj3dh
    @dev-gj3dh Před 14 dny

    wow!!!

  • @weradsaoud2018
    @weradsaoud2018 Před 14 dny

    Thank you, your videos on Angular are the best.