- 507
- 1 019 493
Code with Ahsan
Sweden
Приєднався 1 жов 2011
I built this channel to share about Web Development, and to teach Web Development, JavaScript, Angular, React, and other technologies in the Web Ecosystem. My goal is to provide FREE education as much as possible and I love you for helping me make that a reality!
If you don't know me, I've been working as a Software Engineer for about a decade. I'm a GOOGLE-acknowledged expert in Angular (GDE - Google Developers Expert) - codewithahsan.dev/gde and I love solving problems with technology and to teach.
If you don't know me, I've been working as a Software Engineer for about a decade. I'm a GOOGLE-acknowledged expert in Angular (GDE - Google Developers Expert) - codewithahsan.dev/gde and I love solving problems with technology and to teach.
NgRx Signals Store: Angular State Management Made Simple
In this video, we'll explore the power of NgRx Signals, the new and improved way to manage state reactively across your Angular applications. We'll build a complete task manager app, demonstrating key concepts like defining models, creating a signal store, adding todo items, toggling their completion status, and filtering the list based on status. Learn how NgRx Signals simplifies state management, ensuring performance, scalability, and a streamlined development experience. Plus, discover how to use effects to persist your todo list in local storage for a more robust app. Whether you're new to state management or looking to level up your Angular skills, this video is for you!
Practice writing complex software right in your browser, check out codecrafters with the following link which helps the channel grow too:
app.codecrafters.io/join?via=code.with.ahsan
Tags:
angular
ngrx
ngrx signals
angular state management
angular tutorial
state management
angular development
angular app
frontend development
angular cookbook
web development
javascript
typescript
Link to code repo:
github.com/PacktPublishing/Angular-Cookbook-2E
Angular Cookbook 2nd Edition:
ng-cookbook.com/buy
Timeline:
00:00:00 - Introduction
00:00:46 - Project Overview
00:01:51 - Installing NgRx Signals package
00:02:35 - Creating the store and model
00:04:42 - Using the store in our application
00:07:32 - Adding todos (withMethods)
00:13:55 - Toggle todos (withMethods)
00:15:58 - Showing completed todos count (withComputed)
00:19:16 - Filtering todos (withComputed)
00:24:42 - Persisting todos in localStorage
00:33:41 - Showing a snackbar on all todos completed
Follow the socials:
codewithahsan
x.com/codewith_ahsan
code.with.ahsan
Practice writing complex software right in your browser, check out codecrafters with the following link which helps the channel grow too:
app.codecrafters.io/join?via=code.with.ahsan
Tags:
angular
ngrx
ngrx signals
angular state management
angular tutorial
state management
angular development
angular app
frontend development
angular cookbook
web development
javascript
typescript
Link to code repo:
github.com/PacktPublishing/Angular-Cookbook-2E
Angular Cookbook 2nd Edition:
ng-cookbook.com/buy
Timeline:
00:00:00 - Introduction
00:00:46 - Project Overview
00:01:51 - Installing NgRx Signals package
00:02:35 - Creating the store and model
00:04:42 - Using the store in our application
00:07:32 - Adding todos (withMethods)
00:13:55 - Toggle todos (withMethods)
00:15:58 - Showing completed todos count (withComputed)
00:19:16 - Filtering todos (withComputed)
00:24:42 - Persisting todos in localStorage
00:33:41 - Showing a snackbar on all todos completed
Follow the socials:
codewithahsan
x.com/codewith_ahsan
code.with.ahsan
Переглядів: 307
Відео
Content Projection in Angular - all you need to know
Переглядів 27221 день тому
Practice writing complex software right in your browser, check out codecrafters with the following link which helps the channel grow too: app.codecrafters.io/join?via=code.with.ahsan In this video, you're going to learn everything you need to know about Content Projection in Angular. We will discuss the basics of content projection in Angular and how to project content in Angular. We'll then di...
TypeScript 5.5 brings a BANGER fix in Angular Applications
Переглядів 448Місяць тому
TypeScript 5.5 brings a BANGER fix in Angular Applications
Discover the New @let Statement in Angular 18.1! Create Variables Directly in Template
Переглядів 248Місяць тому
Discover the New @let Statement in Angular 18.1! Create Variables Directly in Template
Google Gemini Nano in Chrome provides OFFLINE AI
Переглядів 1,1 тис.Місяць тому
Google Gemini Nano in Chrome provides OFFLINE AI
Recap & Next Steps for your React Journey | Practical React Essentials Course (Urdu/Hindi)
Переглядів 882 місяці тому
Recap & Next Steps for your React Journey | Practical React Essentials Course (Urdu/Hindi)
Pizza Restaurant App Intro | Practical React Essentials Course (Urdu/Hindi)
Переглядів 802 місяці тому
Pizza Restaurant App Intro | Practical React Essentials Course (Urdu/Hindi)
Assignment: Adding features to Contacts App using React Router
Переглядів 332 місяці тому
Assignment: Adding features to Contacts App using React Router
Introduction to Redux | Practical React Essentials Course (Urdu/Hindi)
Переглядів 722 місяці тому
Introduction to Redux | Practical React Essentials Course (Urdu/Hindi)
Deploying a React app to GitHub Pages | Practical React Essentials Course (Urdu/Hindi)
Переглядів 1362 місяці тому
Deploying a React app to GitHub Pages | Practical React Essentials Course (Urdu/Hindi)
Git, React & Pushing to GitHub | Practical React Essentials Course (Urdu/Hindi)
Переглядів 812 місяці тому
Git, React & Pushing to GitHub | Practical React Essentials Course (Urdu/Hindi)
Tailwind CSS Setup | Practical React Essentials Course (Urdu/Hindi)
Переглядів 782 місяці тому
Tailwind CSS Setup | Practical React Essentials Course (Urdu/Hindi)
If I was starting to learn React (forms) today, this what I would use
Переглядів 5923 місяці тому
If I was starting to learn React (forms) today, this what I would use
Setup React with Vite | Practical React Essentials Course (Urdu/Hindi)
Переглядів 1403 місяці тому
Setup React with Vite | Practical React Essentials Course (Urdu/Hindi)
Using the resources in this course | Practical React Essentials Course (Urdu/Hindi)
Переглядів 653 місяці тому
Using the resources in this course | Practical React Essentials Course (Urdu/Hindi)
Why React ? | Practical React Essentials Course (Urdu/Hindi)
Переглядів 1923 місяці тому
Why React ? | Practical React Essentials Course (Urdu/Hindi)
Introduction | Practical React Essentials Course (Urdu/Hindi)
Переглядів 1563 місяці тому
Introduction | Practical React Essentials Course (Urdu/Hindi)
React project tutorial | Ego | Inspired by Addy Osmani
Переглядів 1 тис.4 місяці тому
React project tutorial | Ego | Inspired by Addy Osmani
Supercharge Your Angular Apps' Performance with Deferred Blocks
Переглядів 1034 місяці тому
Supercharge Your Angular Apps' Performance with Deferred Blocks
Build a reactive Chat App UI with Angular Signals
Переглядів 1,2 тис.4 місяці тому
Build a reactive Chat App UI with Angular Signals
Chrome Extension to submit batch feedback for GitHub Classroom Teachers
Переглядів 1045 місяців тому
Chrome Extension to submit batch feedback for GitHub Classroom Teachers
Devin is here. And AI is going to take developer jobs
Переглядів 5005 місяців тому
Devin is here. And AI is going to take developer jobs
Angular 17 - Model Inputs - Two way data binding
Переглядів 1,9 тис.5 місяців тому
Angular 17 - Model Inputs - Two way data binding
Angular for beginners - Let's build a balloons popping game using Angular Signals and Signal Queries
Переглядів 9456 місяців тому
Angular for beginners - Let's build a balloons popping game using Angular Signals and Signal Queries
Easy Angular Routes: Quick Guide to withComponentInputBinding()
Переглядів 4206 місяців тому
Easy Angular Routes: Quick Guide to withComponentInputBinding()
Angular 17.1 has introduced Signal Inputs
Переглядів 9217 місяців тому
Angular 17.1 has introduced Signal Inputs
Angular Cookbook 2nd Edition | The book for every Angular Developer
Переглядів 5267 місяців тому
Angular Cookbook 2nd Edition | The book for every Angular Developer
1000 developers learning Web Development Basics for Free in Urdu/Hindi
Переглядів 1697 місяців тому
1000 developers learning Web Development Basics for Free in Urdu/Hindi
NextJS Rendering Compared: SSG, SSR, CSR & Server Actions
Переглядів 2 тис.8 місяців тому
NextJS Rendering Compared: SSG, SSR, CSR & Server Actions
How to Build an Online Course Platform with Angular, Firebase, and Filestack
Переглядів 1,8 тис.8 місяців тому
How to Build an Online Course Platform with Angular, Firebase, and Filestack
Where's the full podcast???
great tutorial, can we have more tutorials on this stack sir?
@@user-oc8yk7tb8f i can look into it :)
Best👍
Thanks 👍
Best content 👍
Amazing 👍
Why we are using signals specifically ? Why don't we use normal variables and decorators. In what way signals are helping here rather than using the normal variables. I want to know the difference. Please let me know that. This video really helps a lot, Thanks :)
Great question! Normal variables are bound with Angular’s regular change detection with “zones” which trigger on http calls, browser events, and set timeout etc. it is not very performant that’s why we had the OnPush change detection strategy introduced. Signals take another approach. Instead of checking all “normal” variables (class properties) in components on every browser event, signals can actually notify angular themselves whenever the value of a signal changes. So you can opt for OnPush change detection in every single component and use signals for better performance.
hi amazing project! do you think it could be used as a project for resume for final year placements?
Watched till end 👍
Shukriya 👍
Ma Sha Allah 👍
Amazing 👍
Amazing 👍
Thanks. M b ya course kr na chahti ho Kya is sa hum acha rozgar hasil kr sakta ha
@@WarisWaris-z4v Isko completed karke aur projects bana ke, acha portfolio bana ke jobs k liye apply kijiye. Allah asani karyga
Worked for me - thank you! Wondering how I could change the font it outputs? It shows as sans-serif in the doc, but outputs as serif in the email. And the bullet points do not show.
I figured it out, you have to stick to basic fonts. I was using open sans, it worked when I switched to Arial.
Awesome! Thanks for sharing Stephanie
Great question by Ahsan at 34:00. Quite informative session
@@talhashakil8245 thanks. Do share the session
Watched till end 👍
Great material. I wish you talked about rxMethod()
you present the material too quickly - it’s unclear who you’re telling it for
Thank you for the feedback. I will access it for future videos.
Wow amazing thanks👍
Watched till end 👍
well
Watched till end👍
Watched till end 👍
lol
👑
its important to create. customer id for the user too right? with stripe
Watched till end 👍
Amazing 👍
Thanks for the visit
app.codecrafters.io/join?via=code.with.ahsan
What is your go-to method for state management? Local observables? Local Signals? Shared Services? NgRx? NgRx Signals?
Dekh Chuka
Zabardast
what about saving credit card information? to use it consistently
Amazing 👍
Watched till end 👍
Very nice👍
How is this in any way useful for the average user. There is not a single "normal" user out there who is going to go through all this and then open some "Dev Tool" program in order to use the Ai. That is in no way at all useful for the average/normal user! I open the Edge browser and I have a copilot side panel without having to do any of this google crap. I don't know where Google's head is in all of this. They average/normal Chrome user is not going to EVER do all the stuff you just showed in order to get Gemini up and running as a part of Chrome. It's ridiculous. And the average/normal Chrome user has absolutely zero understanding or knowledge of react or any other programing language. I am at a complete loss as far as Google's strategy or who they are targeting as the user base......because it sure is not the average or normal Chrome user.
Great question. As I mentioned. This is an early preview inside the Chrome Browser (as an API) :) which is NEVER meant for “an average” user. It is supposed to be tested by power users for now and when this is available for the general audience, you can imagine a much easier way for people to be able to use it. Secondly, gemini nano’s JavaScript API (which I used in my React code) is for developers and not for general users. So I can imagine your frustration with the video :) But it isn’t intended for you, and I should probably have done a better job with the title.
You can also imagine free tools(chrome extensions or websites) being developed that use Gemini Nano and you get to use it for free. Even offline
@@CodeWithAhsan I do understand where you are coming from. I was just a little/a lot frustrated. It just blows my mind that Google seems so far behind that it can't even include a useful Ai in perhaps their #1 used product, chrome.
I like to become web developer ❤
All the best
it was short, sweet but effective <3
Glad you liked it!
Hi Ahsan, can you please share the source code on github or something similar. I would be very greatful.
Bhai form submit naa ho par akk video bhi upload kar daw
Done 👍
Watched till end 👍
Watched till end 👍
Can't understand
@@adityapal2952 what did you not understand?
@@CodeWithAhsanMay be he speaks alien language 😂
Dekh li
Grate efforts Ahsan, You are contributing your best for the Angular community Love from India...
Amazing 👍
Is this with the AuthSignals the recommended way to store the values?
Best👍