Deborah Kurata | youtube.com/@deborah_kurata
@deborahkurata.bsky.social
📤 1708
📥 265
📝 72
Angular GDE Microsoft MVP Pluralsight author YouTube: youtube.com/@deborah_kurata
pinned post!
Welcome httpResource to the @angular resource API family! In this video, we introduce the httpResource API (v 19.2), its purpose and two syntax options. Then evaluate resource() vs rxResource() vs httpResource().
youtu.be/DefmIyp3Uho
#angular
#signals
#resourceAPI
loading . . .
First Look at Angular's new httpResource()
YouTube video by Deborah Kurata
https://youtu.be/DefmIyp3Uho
8 months ago
5
18
3
Does RxJS fit into an Angular signal-based world? In this video, I outline several scenarios and walk through a code example using RxJS and rxResource.
youtu.be/0UJjQ2pKgns
#Angular
#rxjs
#Signals
loading . . .
Does RxJS Fit into an Angular Signal-based World?
YouTube video by Deborah Kurata
https://youtu.be/0UJjQ2pKgns
about 2 months ago
0
7
0
How do you determine which variables should be Angular signals? Check out my latest YouTube video for guidelines, an example, and code.
youtu.be/SUpH6w25TkU
#Angular
#signals
loading . . .
Which Variables Should Be Angular Signals?
YouTube video by Deborah Kurata
https://youtu.be/SUpH6w25TkU
2 months ago
0
11
0
Do you still need rxjs in an angular application? The answer is detailed in my latest course:
www.pluralsight.com/library/cour...
✅React to events ✅ Retrieve and compose complex data (with rxResource) ✅Debounce user input (Yep, that's 2 new @pluralsight courses in 2 months. 😱)
loading . . .
Angular: RxJS for Reactive Programming
https://www.pluralsight.com/library/courses/angular-rxjs-reactive-programming
3 months ago
0
3
0
Yes! This course has: ✅ Angular v20 ✅ Code along demo ✅ *what* should be a signal (+ why) ✅ httpResource vs httpClient ✅ service-based vs component-based resources ✅ stand-alone components ✅ zoneless ✅ Template control flow Check it out😊
#angular
add a skeleton here at some point
5 months ago
0
4
0
It's official ... my "Angular: Signals" course just published on Pluralsight. 🎉 Learn the what, why and how of signals ... and httpResource for reactively retrieving data directly into signals. Let me know what you think!
www.pluralsight.com/courses/angu...
loading . . .
Angular: Signals
http://www.pluralsight.com/courses/angular-signals
5 months ago
0
12
3
This week's Angular video: ✅ Control when httpResource issues the request ✅ Declare resource signals in a *component* ✅ Return an httpResource from a method
youtu.be/4VhiNK_9QIY
#angular
#resource
#Signals
loading . . .
Return httpResource() from a Method
YouTube video by Deborah Kurata
https://youtu.be/4VhiNK_9QIY
7 months ago
0
7
0
Hey! Please join me in celebrating reaching the 20K subscriber milestone! Yay! 🎉 Thanks to you for watching my angular content!
8 months ago
5
65
3
For a search feature in Angular, we don't want to issue an http request for each character the user types. In this video, I walk through one way to implement search using debouncing and the new experimental resource API.
youtu.be/5A1I6rpe8UA
#angular
#resourceAPI
loading . . .
Debouncing with the Resource API
YouTube video by Deborah Kurata
https://youtu.be/5A1I6rpe8UA
8 months ago
0
11
0
Why does @angular need a new API to retrieve data? Does the Resource API seem pointless or confusing? In this video, I answer the *why?* question, telling the backstory of signals and the Resource API.
youtu.be/YHZkiUbbeOg
#angular
#signals
#resourceAPI
loading . . .
resource(), rxResource(), httpResource(): Why????
YouTube video by Deborah Kurata
https://youtu.be/YHZkiUbbeOg
8 months ago
1
10
1
Welcome httpResource to the @angular resource API family! In this video, we introduce the httpResource API (v 19.2), its purpose and two syntax options. Then evaluate resource() vs rxResource() vs httpResource().
youtu.be/DefmIyp3Uho
#angular
#signals
#resourceAPI
loading . . .
First Look at Angular's new httpResource()
YouTube video by Deborah Kurata
https://youtu.be/DefmIyp3Uho
8 months ago
5
18
3
When retrieving data, there is often related data to retrieve. A user enters a username and we get detailed user info. Then take the user Id from the details and retrieve that user's posts. See the @angular resource API in action!
youtu.be/MpU3UQ2-rww
#angular
#resource
loading . . .
SIA: Retrieve Related Data
YouTube video by Deborah Kurata
https://youtu.be/MpU3UQ2-rww
8 months ago
0
13
1
Should we declare our signals in our services or in our components? In this video, we identify basic guidelines for answering this question and walk through examples.
youtu.be/xtxBMcEMcxU
#angular
#Signals
loading . . .
SIA: Signals in a Service or a Component?
YouTube video by Deborah Kurata
https://youtu.be/xtxBMcEMcxU
8 months ago
0
12
0
Has your data gone stale? Refresh it easily with the resource() API! In this video, we use resource reload to implement a refresh button. Then leverage linkedSignal and setTimeOut to keep users informed when their data needs refreshing.
youtu.be/sY4ofhfQ_pk
#angular
#resourceAPI
#signals
loading . . .
Signals in Action: Stale data? Refresh it!
YouTube video by Deborah Kurata
https://youtu.be/sY4ofhfQ_pk
9 months ago
0
13
1
reposted by
Deborah Kurata | youtube.com/@deborah_kurata
Visual Studio Live!
9 months ago
Master the hidden gems of .NET/C#! Join MVP
@deborahkurata.bsky.social
at
#VSLive
Las Vegas on March 11 to discover powerful features like collection expressions, date handling & pattern matching. Learn to make your code more efficient >
https://buff.ly/40Dfv59
🚀
#dotNET
#CSharp
loading . . .
Useful New-ish Features in .NET/C# -- Visual Studio Magazine
We often hear about the big new features in .NET or C#, but what about all of those lesser known, but useful new features? How exactly do you use constructs like collection indices and ranges, date…
https://buff.ly/40Dfv59
0
4
4
We often pass parameters on the URL when issuing an HTTP request. In this video, we walk through how to pass parameters when issuing an HTTP request using the resource API.
youtu.be/xyKT0AMN25A
#angular
#resourceAPI
loading . . .
Signals in Action: Passing Parameters when issuing an HTTP Request
YouTube video by Deborah Kurata
https://youtu.be/xyKT0AMN25A
9 months ago
0
2
1
Did you know that our code can provide an Angular service on a route? (instead of in 'root' or a component) Check out the video for details, including sharing the service with child routes.
youtu.be/cwZh6bL98UY
#angular
#routing
loading . . .
Provide an Angular Service on a route!
YouTube video by Deborah Kurata
https://youtu.be/cwZh6bL98UY
9 months ago
0
10
3
Ever open an unfamiliar code project and wish you had someone to explain that code, line by line? Let Gemini be that someone! In this video, we use Google AI Studio and ask Gemini to walk us thru an Angular service.
youtu.be/RJqjixmtBGU
#angular
#Gemini
#aistudio
loading . . .
Walk Through Code with Google AI Studio
YouTube video by Deborah Kurata
https://youtu.be/RJqjixmtBGU
9 months ago
0
4
1
Issuing an HTTP request is fraught with peril! In this video, we examine how to handle HTTP errors when using the rxResource API.
youtu.be/T7DPGCSmQes
#angular
#errorhandling
loading . . .
Signals in Action: Error Handling with rxResource
YouTube video by Deborah Kurata
https://youtu.be/T7DPGCSmQes
9 months ago
0
6
2
The signals in our Angular services are handled differently if the service is provided in "root" vs in a component. Check out the differences in my latest video:
youtu.be/K01oDsWRCEQ
#angular
#signals
loading . . .
Signals in Action: Providing a Service in root vs Component
YouTube video by Deborah Kurata
https://youtu.be/K01oDsWRCEQ
10 months ago
0
12
1
reposted by
Deborah Kurata | youtube.com/@deborah_kurata
Rainer Hahnekamp
10 months ago
Change Detection in
#Angular
: often seen as ‘magic,’ but it’s the foundation of performance and scalability. My latest video 🎥 shows its inner workings, tackles OnPush, dives into zoneless Change Detection, and takes a glimpse into the future of Signal Components! Check it out
youtu.be/54o9eSGjfW4
loading . . .
Modern Change Detection
YouTube video by Rainer Hahnekamp
https://youtu.be/54o9eSGjfW4
0
12
6
What's the easiest way to display a loading indicator in our Angular applications? Check out the video:
youtu.be/5K0Jr2ymQEs
#angular
#loadingindicator
loading . . .
Signals in Action: Loading Indicator
YouTube video by Deborah Kurata
https://youtu.be/5K0Jr2ymQEs
10 months ago
2
10
1
reposted by
Deborah Kurata | youtube.com/@deborah_kurata
Maureen Josephine💙
10 months ago
🎉Sounds like an amazing
#monday
for
#book
recommendations. And look, am featured here🫶🏾🥳🥳 Super proud of
@sbenhoff.bsky.social
on publishing “Lead Developer Career Guide” 💙 Take aways📝 1.Prioritizing learning new skills 2.Taking the lead 3.Having difficult conversations 4.Mentorship
#career
#guide
1
10
4
Join me tomorrow, Dec 13 at 11 AM PST for a **live** coding session using signals! You'll see how to apply signals in an application, including the new linkedSignal() and rxResource(). See you there!
www.meetup.com/angularcommu...
#angular
#signals
loading . . .
A Very LUCKY RxJS Friday the 13th w/ Deborah Kurata & Chris Perko, Fri, Dec 13, 2024, 12:00 PM | Meetup
Hey Angular Devs! There's nothing unlucky about this Friday the 13th!! Get ready to join Angular experts and GDEs [Deborah Kurata](https://www.youtube.com/@deborah_kurata
https://www.meetup.com/angularcommunity/events/305053466
11 months ago
1
10
3
Have you seen Angular's 2024 Advent Calendar? Guess who's behind today's door (#11)!
angularchristmascalendar.com
#Angular
loading . . .
Angular Christmas Calendar
The Angular Christmas Calendar website - 24 guests will share their personal insights on Angular as seen in 2024.
https://angularchristmascalendar.com/
11 months ago
0
21
5
Learning signals is step 1. Understanding when and how to apply them is often the more difficult next step. Together, let's build an application, including a signal-based service and component that uses those signals.
youtu.be/LHgJP7MwTWY
#angular
#signals
loading . . .
Signals in Action: Building an App
YouTube video by Deborah Kurata
https://youtu.be/LHgJP7MwTWY
11 months ago
0
15
3
When Should We (NOT) Use a Signal effect()? Let's walk thru some scenarios, examining an effect() based approach and an alternate approach. Then look at the version 19 changes to the effect() function and summarize suggested guidance.
youtu.be/XWz8pxQWD8c
#angular
#signals
loading . . .
When Should We (NOT) Use a Signal effect()?
YouTube video by Deborah Kurata
https://youtu.be/XWz8pxQWD8c
11 months ago
0
12
3
reposted by
Deborah Kurata | youtube.com/@deborah_kurata
Shelley Benhoff 👑🖖
11 months ago
🍂📚 Thanksgiving & Black Friday Special from Manning Publications! 📚🍂 Get 50% OFF all books when you buy 2 or more Nov. 27 - Dec. 2! This is a great opportunity to get my book, Lead Developer Career Guide! 👉 Shop now:
tinyurl.com/benhoff
1
2
1
reposted by
Deborah Kurata | youtube.com/@deborah_kurata
Lara Newsom or Nerdsom or whatever
11 months ago
Don’t forget to check out Brandon’s Angular starter pack!
go.bsky.app/hLveAd
add a skeleton here at some point
3
35
11
The @angular team is proposing some significant changes to how we name our Angular files and classes. In this video, we walk through the naming section of the new style guide and discuss the reasons behind the proposed changes.
#angular
#styleguide
youtu.be/6JtXHT2Np30
loading . . .
New Naming Conventions: Reviewing the new Angular Style Guide
YouTube video by Deborah Kurata
https://youtu.be/6JtXHT2Np30
12 months ago
2
21
0
Angular signals haven't had great support for async operations, until now! @angular v19 introduces resource() and rxResource(). These features revolutionize how we handle our HTTP requests! Check it out!
youtu.be/_KyCmpMlVTc
#angular
#rxjs
#resource
loading . . .
First Look at Angular's new resource() and rxResource()
YouTube video by Deborah Kurata
https://youtu.be/_KyCmpMlVTc
12 months ago
0
14
0
Angular v19 introduces a new signal primitive: linkedSignal() This video is a first look at linkedSignal(), including its purpose and possible use cases.
youtu.be/hFR3gVIY9gM
#angular
#signals
loading . . .
First Look at Angular's new linkedSignal()
YouTube video by Deborah Kurata
https://youtu.be/hFR3gVIY9gM
about 1 year ago
0
7
1
You already use routing, but ever wonder how @angular routing actually works? This video clarifies the concept of a single page application and explains navigation and routing with an example.
youtu.be/9QU688IZAKc
#angular
#routing
#singlepageapplication
loading . . .
Angular Routing Explained
YouTube video by Deborah Kurata
https://youtu.be/9QU688IZAKc
about 1 year ago
1
4
0
I was asked if take(1) or takeUntilDestroyed() is better when issuing an HTTP request. In this video, we examine the take() operator, look at the Angular and RxJS source code, and compare the two operators.
#Angular
#rxjs
youtu.be/NNVgVR8rOIY
loading . . .
When to use take() vs takeUntilDestroyed()?
YouTube video by Deborah Kurata
https://youtu.be/NNVgVR8rOIY
about 1 year ago
0
2
0
Should you use takeUntilDestroyed() with an HTTP put, post, or delete operation? The short answer is "Probably not!". In this video, we examine the reasons why you should not use takeUntilDestroyed() for mutation requests.
youtu.be/T_xN1hPJijg
#angular
#rxjs
loading . . .
Don't use takeUntilDestroyed() with Angular's HTTP PUT, POST, or DELETE?
YouTube video by Deborah Kurata
https://youtu.be/T_xN1hPJijg
about 1 year ago
1
5
0
Syncing multiple select boxes isn't always easy, especially when they require HTTP requests. In this video, we code: 🚥a procedural approach using signals. 🚥a reactive approach using a signal effect.
youtu.be/TgIRLiTHzc8
#Angular
#signals
loading . . .
Synchronizing Select Boxes with an Angular Signal Effect
Syncing multiple select boxes isn't always easy, especially when they are populated from HTTP requests. In this video, we'll first take a procedural approach to synchronizing select boxes with signals. Then change to a reactive approach, using a signal effect. *Links* Sample code (procedural approach): https://stackblitz.com/~/edit/sync-select-procedural-deborahk Sample code (effect approach): https://stackblitz.com/~/edit/sync-select-effect-deborahk Sample code (Subject approach): https://stackblitz.com/~/edit/sync-select-subject-deborahk Angular Docs: https://angular.dev/guide/signals#effects *Content* 00:00 Syncing multiple select boxes 00:24 Sample Application 01:27 Populating the primary select box with toSignal() 03:15 Syncing the secondary select box (procedural) 07:09 Syncing the secondary select box (signal effect) 09:38 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angular16tutorial #effectsinangularsignals #dependentselectboxes #angulardependentselectboxes #angularselect #angularsynchronizetwocomboboxes #angularsynchronizetwoselectboxes #angularsynctwocomboboxes #angularsynctwoselectboxes
https://youtu.be/TgIRLiTHzc8
over 1 year ago
0
3
0
Currying transforms a function with multiple params into a set of nested functions each with a subset of those params. This video examines currying and how to use it to minimize duplicate code in our @angular apps.
youtu.be/cCUzCk6KE0Q
#angular
#currying
loading . . .
Currying for More Generalized Angular Code
Currying transforms a function with multiple parameters into a sequence of nested functions each with a subset of those parameters. This allows for the partial application of a function. How is that useful? Currying can aid in DRYing our code. With DRY, or "Don't Repeat Yourself" the goal is to reduce or eliminate duplicate code. In this video, we examine what currying is and use it to minimize duplicate code in our Angular applications *Links* Code: https://stackblitz.com/~/edit/currying-simple-deborahk Code: https://stackblitz.com/~/edit/currying-dry-deborahk YouTube video: "Understanding Immutablity in JavaScript": https://youtu.be/DBZESPS-5mQ YouTube video: "Build Generalized DRY Angular Code with Generics": https://youtu.be/ebVNm8IylrA Currying article: https://medium.com/codex/currying-in-typescript-ca5226c85b85 Currying article: https://javascript.plainenglish.io/javascript-currying-comprehensive-guide-e69c47497309 *Special Thanks* 🌟 To Sander Elias for suggesting currying. Follow him at: https://mastodon.social/@sanderelias *Content* 00:00 Currying for DRYer code 01:01 Simple application 03:20 Currying a function 05:14 Using a curried function 08:04 Generic sample application 08:49 Currying a generic function 10:16 Using a generic curried function 11:20 Chaining a curried function 12:06 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angulartutorial #angulardevelopers #angulartypescript #angularapplications #angularbestpractices #currying #curryinginangular #curryinginjavascript #curryingintypescript #drywithangular #drywithcurrying #bestangularpractices
https://youtu.be/cCUzCk6KE0Q
over 1 year ago
0
1
0
With @let, new in @Angular v18.1, we can declare and assign local variables in our template! In this video, we'll look at the @let declaration syntax, walk through common scenarios, and evaluate early best practices for using @let.
youtu.be/tIi9304sjEI
#angular
loading . . .
Declare Variables in Templates: Angular's New @let Declaration (v18.1)
With @let, new in Angular v18.1, we can declare and assign local variables in our template. That's right, I said template! In this video, we'll look at the @let declaration syntax, walk through some common scenarios, and evaluate some early best practices for using @let. *Links* Code: https://stackblitz.com/~/edit/let-declaration-deborahk YouTube video: "Angular's New Template Syntax: Control Flow": https://youtu.be/j9VTGRGyE-o Pre-release Article: https://itnext.io/template-local-variables-with-let-in-angular-4c6b3adfd9be Pre-release Article: https://netbasal.com/exploring-angulars-new-let-syntax-enhancing-template-variable-declarations-40487b022b44 *Content* 00:00 @let declaration 00:30 @let syntax 01:09 Sample application 01:34 Minimize duplicate expressions 03:00 Pipe 03:36 Type narrowing of signals 05:03 Variable scope 06:07 Style attributes 07:59 Calculations? 09:13 Calling a method? 10:06 Best practices 11:34 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angulartutorial #angulardevelopers #angularbestpractices #angular18newfeatures #angular18newfeature #angular18features #@let #angularletdeclaration #@letinangular #@letinangular18.1 #angularnewfeatures #featuresinangular18 #declarevariableintemplate #angular@let #angularlatestfeatures #whatis@letinangular #angularfeaturesandupdates #angular18featuresandupdates #angular@letsyntax
https://youtu.be/tIi9304sjEI
over 1 year ago
0
1
0
Join me @VSLive! @ Microsoft HQ in Redmond WA! I've planned some fun talks on C# and @Angular. 💵Save $500 off standard pricing with Early Bird savings + code KURATA. Hurry, offer ends 7/12! -
bit.ly/vslmsfthq
See you there!
#TechConference
#angular
#csharp
loading . . .
Visual Studio Live!: Training Conferences and Events for Enterprise Microsoft .NET and Azure Developers
https://bit.ly/vslmsfthq
over 1 year ago
0
0
0
The @for block, part of Angular's new control flow syntax, provides useful features such as an @empty block, odd and even row indication, and easier change tracking. In this video, we walk through five fun features of the @for block.
youtu.be/ooHPDCLMyXs
#angular
loading . . .
Angular's New @for Block Features
The @for block, part of Angular's new control flow syntax, is great for repeating HTML elements in our templates. And it provides useful features such as an @empty block, odd and even row indication, and easier change tracking. In this video, we walk through five fun features of the @for block. *Links* Code: https://stackblitz.com/~/edit/fun-for-block-deborahk YouTube video: "Angular's New Template Syntax: Control Flow": https://youtu.be/j9VTGRGyE-o YouTube video: "Automatically Migrate to Angular's New Control Flow Template Syntax": https://youtu.be/fkAFHMhjJsQ *Content* 00:00 @for block 00:46 @empty block 01:25 $index 02:14 $first, $last, $odd, $even 04:03 $count 04:57 track 00:00 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angulartutorial #angulardevelopers #angularbestpractices #angular17newfeatures #angular17newfeature #angular17features #@for #@forinangular #@forinangular17 #angularnewfeatures #featuresinangular17 #angular@forloop #angular@for #angularlatestfeatures #whatis@forinangular #angularfeaturesandupdates #angular17featuresandupdates #angular@forcontrolflow #angular@forsyntax #angular17featureswithexample #@forinangular17withexample #angularbestpractices
https://youtu.be/ooHPDCLMyXs
over 1 year ago
0
2
0
With DRY, or "Don't Repeat Yourself" the goal is to reduce duplicate code, making our intent more clear. In this video, we'll examine techniques for using generics to build generalized functions in our Angular apps.
youtu.be/ebVNm8IylrA
#angular
#typescript
#generics
loading . . .
Build Generalized DRY Angular Code with Generics
With DRY, or "Don't Repeat Yourself" the goal is to reduce or eliminate duplicate code, making our intent more clear. In this video, we'll examine techniques for using generics to build generalized functions in our Angular applications. *Links* Code: https://stackblitz.com/~/edit/stackblitz-generics-simple-deborahk YouTube video: "Understanding Immutability in JavaScript": https://youtu.be/DBZESPS-5mQ *Special Thanks* 🌟 To Sander Elias for suggesting generics. Follow him at: https://mastodon.social/@sanderelias *Content* 00:00 DRY - Don't repeat yourself 00:40 Sample application 01:36 Generics 03:51 Calling a generic function 04:42 keyof 08:00 Generalized signal update 10:46 Generic constraints 14:23 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angularsignals #angulartutorials #angulartutorial #angulardevelopers #angularTypeScript #angularapplications #generics #genericswithangular #DRYwithangular #DRYwithgenerics #bestangularpractices
https://youtu.be/ebVNm8IylrA
over 1 year ago
0
2
0
Now that Angular signals have been out for a while, there are patterns emerging. In this video, we walk through one such pattern for managing state with signals. This Redux-like pattern leverages the best of signals and RxJS.
youtu.be/rHQa4SpekaA
#angular
#rxjs
#redux
loading . . .
A Redux-like Pattern for Managing State with Angular signals
Now that Angular signals have been out for a while, there are patterns emerging. In this video, we'll walk through one such pattern for managing state with signals. This Redux-like pattern leverages the best of signals and RxJS. *Links* Code: https://stackblitz.com/~/edit/rxjs-signals-redux-deborahk YouTube video: "switchMap vs concatMap vs mergeMap": https://youtu.be/RSf7DlJXoGQ YouTube video: "Unsubscribe with takeUntilDestroyed": https://youtu.be/Cr4NRfZxaP0 YouTube video: "Understanding Immutablity in JavaScript": https://youtu.be/DBZESPS-5mQ *Content* 00:00 Redux-like pattern 00:20 Sample application 01:38 Define the state 02:23 Set the initial state 03:09 Define the selectors 04:16 Identify the actions 04:56 Define a Subject 05:55 Creating the Observable pipeline 08:59 Defining reducers 12:30 Accessing state from the component 12:48 Kicking off actions from the component 13:35 Following the pattern (again) 16:13 Modifying the component 17:13 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angularsignals #angularstatemanagementwithsignals #rxjs #rxjsandsignals #signalsandrxjs #angularstatemanagement #angulartutorials #statemanagement #angularwithredux #angularstatemanagementtutorial #angularforbeginners #statemanagementinangular #angularredux #angularstatemanagementbestpractices
https://youtu.be/rHQa4SpekaA
over 1 year ago
1
2
0
Use Angular's takeUntilDestroyed to automatically unsubscribe from an observable when the component or service is destroyed. This helps prevent memory leaks.
#angular
#rxjs
#observable
youtu.be/Cr4NRfZxaP0
loading . . .
Use takeUntilDestroyed to Unsubscribe from Angular's Observables
The takeUntilDestroyed operator, introduced in Angular version 16, automatically unsubscribes from an observable when its component or service is destroyed. This prevents the need to manually unsubscribe. In this video, we examine the takeUntilDestroyed operator and how it can prevent memory leaks. We resolve a common error ("takeUntilDestroyed can only be used within an injection context") and discover DestroyRef. And we look at some caveats with the order of RxJS operations when using takeUntilDestroyed. *Links* Code: https://stackblitz.com/~/edit/takeuntildestroyed-deborahk Documentation: https://angular.dev/api/core/rxjs-interop/takeUntilDestroyed *Content* 00:00 takeUntilDestroyed 00:18 Rule of Subscriptions 00:38 Memory leak in action 02:36 Manually unsubscribing 03:19 Unsubscribing with takeUntilDestroyed 04:12 Error: Only available within an injection context 06:10 Using DestroyRef 07:10 Caveat: Order of operations 10:08 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #takeuntildestroyed #angularondestroyunsubscribe #unsubscribe #angularunsubscribe #rxjstakeuntilunsubscribe #rxjstakeuntilvsunsubscribe #unsubscriberxjs #unsubscribeobservable #unsubscribeinngondestroy #unsubscribeondestroyofcomponent #whyunsubscribe #rxjsunsubscribe #takeuntildestroyed
https://youtu.be/Cr4NRfZxaP0
over 1 year ago
0
1
0
We can only use dependency injection in code that runs in the injection context. What is the injection context? And where can we use the inject() function (Angular v16+)?
youtu.be/rsLW9znsp4E
#angular
#dependencyinjection
#di
#inject
loading . . .
Angular Injection Context Explained
Ever wonder what an Angular injection context is? Angular's dependency injection system relies on a runtime context called the injection context. We can only...
https://youtu.be/rsLW9znsp4E
over 1 year ago
0
2
0
Starting in Angular v18, we can ** Go Zoneless **. This video examines what it means to be zoneless, how to go zoneless, and how going zoneless improves our Angular apps.
#angular
#zoneless
#angular18
youtu.be/MZ6s5EL7hKk
loading . . .
Zoneless Angular Applications in V18
Starting with v18, we can now build our Angular applications without zone.js. In this video, we examine what it means to be zoneless, how we go zoneless, and how going zoneless improves our Angular applications *Links* YouTube video "Angular Signals: What? Why? and How?": https://youtu.be/oqYQG7QMdzw YouTube video "Using toSignal and toObservable for RxJS interop": https://youtu.be/xQIOWkBe5wQ Code - Zoneless: https://stackblitz.com/~/edit/zoneless-deborahk Documentation - zone.js: https://github.com/angular/angular/blob/825023801baf8dbd0bd87b7ec46a65e869e08adb/packages/zone.js/README.md Additional information: https://www.youtube.com/watch?v=KdK20Cn9Y4M https://justangular.com/blog/a-new-era-for-angular-zoneless-change-detection *Content* 00:00 What does zoneless mean? 00:49 What is change detection? 01:17 Demo application using zones 03:32 Going zoneless 06:48 Zoneless demo application 07:43 markForCheck 08:34 signals 09:51 Zoneless and HTTP get 10:23 HTTP get and async pipe 10:51 HTTP get and signals 12:20 Why zoneless? 13:14 Wrap up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angularsignals #signalsinangular #angular #signals #signaltutorial #angulartutorial, #angular18, #changedetectioninangular, #zonelessandreactivityinangular, #angulardevelopers, #angularzoneless18, #angular18zoneless, #angular18features, #angularzoneless, #angularchangedetection, #whatsnewinangular18, #angular18version
https://youtu.be/MZ6s5EL7hKk
over 1 year ago
0
0
0
The new model input signal makes it easy to two-way bind and pass data between our parent and child components. No more @Input and @Output required! This video walks thru the new model input and how to react to changes in that input.
youtu.be/frXIBKqzTK0
#angular
#Signals
loading . . .
Angular's New Model Inputs: Two-way Communication with your Child Components
In Angular, we often want two-way communication between our parent component and its child component. The parent passes a value to the child component. The child component modifies that value, and passes the changed value back to the parent. Accomplishing this task used to be a bit complicated. The child component would define an @Input property to get the value from the parent component. And define an @Output property to send a notification event with the new value. Starting in Angular version 17.2, we can use a model input to easily two-way bind data between a parent component and a child component! In this video, we examine the new model input. We then walk through how to react to changes in that input: first using event binding, then using computed signals. *Links* YouTube video "Angular's New Signal Inputs": https://youtu.be/yjCeaiWXC0U Code: https://stackblitz.com/edit/model-input-deborahk *Content* 00:00 Model input in Angular 00:59 Sample application 02:22 Two-way binding 03:27 Using a model input 05:18 Aliasing a model input 06:08 Required model input 06:56 Reacting to changes: event binding 09:23 Reacting to changes: signals 10:32 Wrap Up ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ View my YouTube content: https://www.youtube.com/@deborah_kurata ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #bestpractices #angulartutorial #angularparentchild #componentcommunicationinAngular #angularcomponentcommunication #angularmodelinput #modelinputsangular #angular17.2modelinputs #angularmodelinputrequired #angularmodeltutorial #angularinput #angularrequiredinput
https://youtu.be/frXIBKqzTK0
over 1 year ago
0
1
0
Who has time to migrate their Angular templates to the new control flow syntax? Luckily, there is a Angular CLI schematic that automatically migrates templates for us! Check out the migration tool in my latest video:
youtu.be/fkAFHMhjJsQ
#angular
#controlflow
loading . . .
Automatically Migrate to Angular's New Control Flow Template Syntax
With Angular's new control flow syntax, we can simplify our templates, improve performance, and reduce bundle sizes. But do we really have time to manually c...
https://youtu.be/fkAFHMhjJsQ
over 1 year ago
0
2
1
Check out my latest YT video -> Angular's new template syntax: control flow. Why do we need a new template syntax? In this video, we examine the new @if and @for control flow blocks. Then answer the "why?" question.
#angular
#controlflow
@angular
youtu.be/j9VTGRGyE-o
loading . . .
Angular's New Template Syntax: Control Flow
Starting in Angular version 17, we have the option of using new techniques for building our templates. This new block template syntax replaces the NgIf, NgFo...
https://youtu.be/j9VTGRGyE-o
over 1 year ago
0
2
0
What's with the new with() method on JavaScript arrays? Use the with() method instead of bracket syntax to modify array elements in an immutable way. Check out my latest YT video here:
youtu.be/Nxe88SVnEOU
#javascript
#es2023
#angular
loading . . .
JavaScript Array with() Method (new in ES 2023)
What's with the new with() method on JavaScript arrays?with() is new in ECMAScript 2023, also known as ES 14, which is the standard for JavaScript.In this vi...
https://youtu.be/Nxe88SVnEOU
over 1 year ago
0
3
0
ES 2023, the current version of JavaScript, provides a new toSorted() method. Why do we need that when we already have sort()? sort() is mutable, toSorted() is immutable. Check out my latest YT video for more info and an example:
youtu.be/LkGCDD0tXQI
#javascript
#Angular
loading . . .
JavaScript Array sort() vs toSorted() (new in ES 2023)
We all know that the array sort() method sorts an array. So why do we need a toSorted() method?toSorted() is new in ECMAScript 2023, also known as ES 14, whi...
https://youtu.be/LkGCDD0tXQI
almost 2 years ago
0
4
2
Immutability ... What does it mean and why should we care? In my latest video, we look at immutability of JavaScript primitives, arrays, and objects. And why immutability is important for programming.
youtu.be/DBZESPS-5mQ
#Angular
#javascript
#Immutable
loading . . .
Understanding Immutability in JavaScript
We often hear the terms: immutable and immutability. What do they mean and, as developers, why should we care?In this video, we look at immutability of primi...
https://youtu.be/DBZESPS-5mQ
almost 2 years ago
0
2
0
Load more
feeds!
log in