Fun Of Heuristic
Fun Of Heuristic
  • 119
  • 1 330 264
Use Angular Signals with NgRx
Explore the simplicity of using ngrx with Angular Signal in this engaging and insightful guide! 🚀 Dive deep into practical programming, journeying from Angular 12 to 16, navigating through updates, and unraveling the ease of using signals with ngrx. Perfect for developers at every level, this video is your key to enhancing your web development skills with ngrx and Angular Signal. 🖥️🛠️ Don't miss out; subscribe and stay tuned for future videos that promise to elevate your coding journey! #AngularSignal #ngrx #WebDevelopment #CodingTutorial"
GitHub: github.com/funOfheuristic/ngrx-tutorial/tree/with-signal
Some more playlists:
Create PWAs: bit.ly/359BXpK
NgRx: bit.ly/2Qu0Ucu
Performance optimization: bit.ly/3fFa1Q8
RxJs: bit.ly/3hytr8o
Angular Tutorial: bit.ly/2Tnwk1t
Dashboard with chart.js: bit.ly/3c9Jd85
Application Development: bit.ly/398w7Gf
Upload File to server: bit.ly/3ccsjWd
Data Structure and algo: bit.ly/3c8b7Bh
Discord: discord.gg/4QZU7KB
Slack: bit.ly/2RXPcEK
00:00 Intro
00:54 Updating to new Angular version
04:37 Application Overview
05:57 Signal with NgRx
08:02 Conclusion
You can support me on Patreon: www.patreon.com/funofheuristic
Equipment used for Video (India links):
Headphone (ATH M50X): amzn.to/3xDcSQK
Microphone (AKG D5): amzn.to/3b1gi5R
Audio Interface (EVO 4): amzn.to/327tnGJ
Camera(Canon 200D): amzn.to/3ja1Pr9
Thanks for watching...
Переглядів: 1 958

Відео

Dependency injection and Provider in NestJs | Backend Framework for Angular Developers
Переглядів 76210 місяців тому
Hey there, fellow coder! Ready to dive deep into Nest.js? Together, we'll explore the core concepts of providers, services, and the art of dependency injection. Nest.js has this unique spin on managing business logic, and if you're familiar with Angular, you'll spot some cool parallels. We'll break down the big three scopes in Nest.js: Singleton, Request, and Transient. Not sure when to use whi...
Expose Api in NestJs | Backend Framework for Angular Developers
Переглядів 29110 місяців тому
Dive deep into NestJS controllers with a comprehensive guide. Learn how to expose API endpoints, manipulate HTTP verbs, and handle redirections effectively. This tutorial not only covers the basics but also provides advanced techniques, ensuring you're well-equipped to build SEO-friendly and robust applications. Perfect for both beginners and seasoned developers. Subscribe for more actionable N...
Introduction to NestJs | Backend Framework for Angular Developers
Переглядів 1,1 тис.11 місяців тому
NestJS is your go-to framework for taking Angular's best features and applying them to backend development. Built with TypeScript, NestJS offers robust scalability and an intuitive API, making it a top choice for developers looking to level up their server-side game. If you're an Angular aficionado, embracing NestJS can significantly enhance your full-stack capabilities. It's modern, efficient,...
Dynamic Component loader in Angular
Переглядів 6 тис.11 місяців тому
Dynamic component loading in Angular allows you to inject components into your application at runtime rather than statically defining them in your templates. This is handy for scenarios like dashboards, where the content can change dynamically based on user interaction or data. To achieve this, you typically create a placeholder using ViewContainerRef and then create and insert that component i...
Use Angular Signal and RxJs together in your application
Переглядів 1,8 тис.11 місяців тому
We can use RxJS and Signal together to enjoy the benefits of both worlds. In this video, we discuss how to use the 'toSignal' and 'toObservable' methods to take advantage of both RxJS and Angular Signal. Signal in Action: ua-cam.com/video/L3Eb3PWVhiM/v-deo.html GitHub: github.com/funOfheuristic/signal/tree/with-rxjs #rxjs #signal #angular Some more playlists: Create PWAs: bit.ly/359BXpK NgRx: b...
Multi-Language Support in Angular: A Guide to Localization and Internationalization
Переглядів 19 тис.Рік тому
Internationalization, often referred to as i18n, is a strategic process that involves designing and preparing your project to function effectively across a wide range of global locales. This approach ensures that your project can cater to diverse linguistic and cultural preferences, making it more accessible and user-friendly for people worldwide. Localization, on the other hand, goes a step fu...
Does College Matter? Feel something's missing? Time to change your mindset.
Переглядів 229Рік тому
Are you a software engineer wondering if a degree from a top-tier college like IIT, MIT, or Stanford is essential for success? In this video, we explore how you can achieve a high salary, career growth, and fulfilling career in the tech industry without a prestigious degree. Learn practical tips on networking, software development, success without college, and building connections in the tech i...
Use of Angular Signal | Upgrade your Angular app with Angular Signal
Переглядів 1,8 тис.Рік тому
In this video we will be going to see the use of Angular Signal while making a todo app, Angular Signals, an integral part of the Angular ecosystem and closely tied to Angular's change detection mechanism, is a sophisticated system that meticulously monitors the utilization and distribution of your application's state. This unique feature, often referred to as 'signal in Angular', empowers the ...
Introduction to Angular Signal | How Will Signal Help with Change Detection?
Переглядів 3,1 тис.Рік тому
Angular Signals, an integral part of the Angular ecosystem and closely tied to Angular's change detection mechanism, is a sophisticated system that meticulously monitors the utilization and distribution of your application's state. This unique feature, often referred to as 'signal in Angular', empowers the framework to fine-tune rendering updates, a crucial aspect of Angular 16. Essentially, an...
Dynamic Loading of Micro Frontends: What Secrets Are You Missing Out On?
Переглядів 2,5 тис.Рік тому
Unlock the power of lazy loading micro frontends without Angular routes in this comprehensive tutorial. Learn the process of dynamically importing and rendering micro frontends, creating a view child, using a remote entry component, and embedding your component in a specified location. This video is a must-watch for developers of all levels looking to optimize applications and enhance their cod...
Micro Frontend in Angular with Dynamic Module Federation using NX!
Переглядів 7 тис.Рік тому
Micro Frontend in Angular with Dynamic Module Federation using NX!
Module Federation and Micro Frontends: The Future of Web Development
Переглядів 2,1 тис.Рік тому
Module Federation and Micro Frontends: The Future of Web Development
A Talk with @LucasPaganiniWeb | Mind set of a Tech Entrepreneur
Переглядів 317Рік тому
A Talk with @LucasPaganiniWeb | Mind set of a Tech Entrepreneur
Use NgRx with Standalone Components in Angular 15
Переглядів 5 тис.Рік тому
Use NgRx with Standalone Components in Angular 15
Learn about routers with Standalone Components | Lazy Load Standalone Components
Переглядів 4 тис.Рік тому
Learn about routers with Standalone Components | Lazy Load Standalone Components
Standalone Components in Angular 15 | Make application without NgModule
Переглядів 6 тис.Рік тому
Standalone Components in Angular 15 | Make application without NgModule
Chat GPT: The Truth About Its Impact on Web Developer Jobs
Переглядів 2,1 тис.Рік тому
Chat GPT: The Truth About Its Impact on Web Developer Jobs
Share data between Between Your's Micro Frontends | Micro Frontend in Angular
Переглядів 18 тис.Рік тому
Share data between Between Your's Micro Frontends | Micro Frontend in Angular
Efficiently Implement Micro Frontends in Angular with Lazy Loading | Micro Frontend in Angular
Переглядів 9 тис.Рік тому
Efficiently Implement Micro Frontends in Angular with Lazy Loading | Micro Frontend in Angular
Micro Frontend in Angular using Angular Elements | Micro Frontend
Переглядів 36 тис.2 роки тому
Micro Frontend in Angular using Angular Elements | Micro Frontend
What is the use of Micro Frontend and its benefits | Micro Frontend
Переглядів 15 тис.2 роки тому
What is the use of Micro Frontend and its benefits | Micro Frontend
Discover the Advantages of Open Source with Anirudh Panda of Opentek.live
Переглядів 7262 роки тому
Discover the Advantages of Open Source with Anirudh Panda of Opentek.live
Implement CRUD Operations with NgRx | CRUD in Angular with NgRx
Переглядів 11 тис.3 роки тому
Implement CRUD Operations with NgRx | CRUD in Angular with NgRx
Runtime Checks in NgRx | Save your time with Runtime Checks in NgRx
Переглядів 2,7 тис.3 роки тому
Runtime Checks in NgRx | Save your time with Runtime Checks in NgRx
Router-store in NgRx | Use of router-store in Angular
Переглядів 7 тис.3 роки тому
Router-store in NgRx | Use of router-store in Angular
Meta-Reducers in NgRx | Use of Meta-Reducers in Angular
Переглядів 5 тис.3 роки тому
Meta-Reducers in NgRx | Use of Meta-Reducers in Angular
Selectors in NgRx | Use of NgRx Selectors in Angular
Переглядів 13 тис.3 роки тому
Selectors in NgRx | Use of NgRx Selectors in Angular
Effects in NgRx | Use of NgRx Effects with Angular
Переглядів 22 тис.3 роки тому
Effects in NgRx | Use of NgRx Effects with Angular
Reducers in NgRx | Use of NgRx Reducers with Angular
Переглядів 14 тис.3 роки тому
Reducers in NgRx | Use of NgRx Reducers with Angular

КОМЕНТАРІ

  • @user-bx7yg7kd8q
    @user-bx7yg7kd8q 5 днів тому

    Hi subrat, please make a video for ANgular 17,18 to handle stand alone in micro front ends

  • @zebcode
    @zebcode 9 днів тому

    It would be great to have an updated version of this showing how it can be done using stand alone components in a newer Angular project.

  • @jlonso1840
    @jlonso1840 9 днів тому

    works 🙂, pls dont forget understand multer and read more documents, its not enough with this video, I had to complement

  • @navyjot
    @navyjot 14 днів тому

    Your series is great help! I followed it but when i am trying run link like localhost:4000 of mf1 in mf2 i am getting CORS issue, how should i resolve it?

  • @user-rv4gp7ny7y
    @user-rv4gp7ny7y 18 днів тому

    Please I am using ionic storage for my ionic angular app which will be compiled to native(iOS, Android) not PWA. Is there a way to sync my offline data to my express.js server when online? I want the synchronization to happen in the background. Will service work for my use case considering it being compiled to native.

    • @FunOfHeuristic
      @FunOfHeuristic 16 днів тому

      Hey in ionic its different, you can check capacitor to create a background task.

  • @VivekSharma24290
    @VivekSharma24290 20 днів тому

    Another application to use Angular Elements is we can package any component/package as a Web Component to support "cross-framework".

  • @ykarthikeyasharma
    @ykarthikeyasharma 21 день тому

    Hi, it is helpful. As entrycomponents is deprecated in Angular 16 and in higher versions. How do we create the MFEs

  • @GKT196
    @GKT196 24 дні тому

    Hindi wala bhi bna dete 😂

  • @antonyantony7714
    @antonyantony7714 27 днів тому

    The best explaining ever 🔥🔥🔥🔥

  • @hamzazahidulislam3490
    @hamzazahidulislam3490 Місяць тому

    Thanks ❤

  • @healthyliving4530
    @healthyliving4530 Місяць тому

    Thanks for the so much effort you have put , really appreciate it :)

  • @gokulkrishna3237
    @gokulkrishna3237 Місяць тому

    Crystal clear explanation hatss off bro❤️

  • @theeverleinhour9616
    @theeverleinhour9616 Місяць тому

    Hello sir, each time we make changes to the project do we need to build it again and run http-server?

    • @FunOfHeuristic
      @FunOfHeuristic Місяць тому

      Yes if you want to rest the pwa features, for normal application change ng serve will work

  • @theeverleinhour9616
    @theeverleinhour9616 Місяць тому

    I had fun learning through your videos sir. Thank you so much!

  • @ultrawhiff
    @ultrawhiff Місяць тому

    Hi, please guide me if you know. I am using angular 17, when i do ng-serve, it says An unhandled expectation occurred: Requested locale ''es-CL' is not defined for the project. I even declared localize array in options

  • @abhinavrai8430
    @abhinavrai8430 Місяць тому

    Quite knowledgeable video sir

  • @javidcarlos
    @javidcarlos 2 місяці тому

    Loads fine but my css is not appended in Host app . Tried adding in Concat js too . still Doesnt work . can u help here?

    • @javidcarlos
      @javidcarlos 2 місяці тому

      Load images / styles under assets folder

    • @FunOfHeuristic
      @FunOfHeuristic 2 місяці тому

      You can use ViewEncapsulation.ShadowDom in your component so the css will be wrapped in a shadow dom and will be included in your js file

  • @Dumm_Dogg
    @Dumm_Dogg 2 місяці тому

    High quality drawings from😅

  • @ahmedadeebarshadahmed3047
    @ahmedadeebarshadahmed3047 2 місяці тому

    HI Subrath, Thank you for the great videos by you, I have a question regarding this topic, how can we use a webcomponent created using module federation from 2 different monorepos, lets say base app is in a different monorepo and the webcomponent is in another monorepo, how can we load it using module federation strategy ? Thank you :)

  • @irshadmuhammed7740
    @irshadmuhammed7740 2 місяці тому

    The bundled file is not working on angular 17

  • @KaushalRaj-kw9cn
    @KaushalRaj-kw9cn 2 місяці тому

    Can you please tell or share some ref. how to create shared service from host app to remote app

  • @Wideraperture
    @Wideraperture 2 місяці тому

    Hi, How to make a platform service which is singleton and can be used across the micro frontend apps?

  • @rahultej8352
    @rahultej8352 2 місяці тому

    Error: Property 'subscribe' does not exist on type 'OperatorFunction<unknown, [arg: unknown, Obs:ervable<number>]>'

  • @urtaav639
    @urtaav639 3 місяці тому

    Como podría renderizar varios componentes en un mismo container pero estos componentes tienen formularios, es decir cada componente podría ser una formulario,pero no sé cómo conectar mi componente al formulario reactivo

  • @dingmarius
    @dingmarius 3 місяці тому

    How to translate text from api (normally like string config) in angular app?

  • @cycdemo4551
    @cycdemo4551 3 місяці тому

    I cannot see micro app in base app... I don't know why I am getting ... Uncaught TypeError: __webpack_require__.r is not a function at 9548 (WebSocketClient.js:50:4) at n (micro-fe.js:1:127) at __webpack_exec__ (zone.js:2741:3) at zone.js:2741:3 at a (micro-fe.js:1:855) at Array.forEach (<anonymous>) at micro-fe.js:1:998 at micro-fe.js:1:1058 at micro-fe.js:1:1062

  • @mohammedyunus6607
    @mohammedyunus6607 3 місяці тому

    Good bro ❤

  • @sourabhpandit6724
    @sourabhpandit6724 3 місяці тому

    if we say all the data stored in store and than access and modify from there so it is means when application load first time it fetches data from database and store in store

  • @baidyanathpanda1964
    @baidyanathpanda1964 3 місяці тому

    Clear explanation!

  • @LogUp-uf1th
    @LogUp-uf1th 3 місяці тому

    really great explanation, Thanks! I tried various sources and videos before stumbling upon your video, almost gave up learning what Microfrontend is. Now it's really clear and easy to understand!

  • @Tibiafy
    @Tibiafy 3 місяці тому

    Thx bro

  • @sergeyhoishyk6948
    @sergeyhoishyk6948 3 місяці тому

    Hi, could you explain how change detection works in the default strategy with signals in version 16? Additionally, how will it operate in version 17 with the default strategy? I understand that in version 16, signals with the 'OnPush' strategy check the component tree, but not all components, and in the next version, 17, we only check the component if we're using the 'OnPush' signal. However, I'm a little confused about how it functions in the default strategy

  • @user-qf2xk1fg6e
    @user-qf2xk1fg6e 4 місяці тому

    Hold on, hold on. Is this a production ready configuration? Don't you need a reverse proxy server in front?

    • @FunOfHeuristic
      @FunOfHeuristic 4 місяці тому

      In heroku or any other services like vercel/netlify you don't need to configure anything, the service will handle thet part for you. But if you are hosting your application from a vpn then the reverse proxy is required

    • @user-qf2xk1fg6e
      @user-qf2xk1fg6e 4 місяці тому

      @@FunOfHeuristic really? It's not just a VPS and you can do whatever you want? Everything is already preconfigured?

  • @4444-c4s
    @4444-c4s 4 місяці тому

    why you are explaining while standing?

  • @ajithajith-rx5xe
    @ajithajith-rx5xe 4 місяці тому

    Hi, base app route didn't work properly in ng 17, throw some error as "is not a function"

  • @sabaparsa8939
    @sabaparsa8939 4 місяці тому

    Thank you🙌

  • @remiguillard3773
    @remiguillard3773 4 місяці тому

    Is this possible to make a video to make a shared auth ngrx store between mfe ?

  • @codewithghan
    @codewithghan 4 місяці тому

    Angular 17 micro frontend ki koi video hai

  • @anirbanmondal1462
    @anirbanmondal1462 4 місяці тому

    Excellent explanation

  • @pruthvi7798
    @pruthvi7798 4 місяці тому

    Good Explanation

  • @Technology-lj2fn
    @Technology-lj2fn 4 місяці тому

    Grate explanation thank you for sharing this information. When I try to fetch data using an HTTP request, sometimes there's a delay in getting the response back from the server. Because of this delay, my program ends up with an empty array instead of the data I expect. Can you help me with this? constructor() { const requestLitSig = toSignal(this.naminationAPI.getNominationList(),{ initialValue: [] }); this.requestLit.set(requestLitSig()); } getNominationList() : Observable<any>{ return this.http.get<any>(`${this._nominationApiUrl}/${ContractNominationApiPaths.nominationList}`) } in this this.requestLit() always empty.

  • @mohitborse6096
    @mohitborse6096 4 місяці тому

    Hey Hi dude I watch your video & its very good well explain. I'm trying same custom element in Angular 17 ver in that trying concat 2 files. but its not working. Can you suggest the way how we do that?

  • @tornikemelikishvili3390
    @tornikemelikishvili3390 4 місяці тому

    if we dont use ngmodule, how to provide interceptors in our application?

    • @FunOfHeuristic
      @FunOfHeuristic 4 місяці тому

      You can add them in the providers inside bootstrapApplicqton which is present in main

  • @Broski_Rodragweez
    @Broski_Rodragweez 4 місяці тому

    I think you linked to the wrong repo for this video. Can you provide link to the code?

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 4 місяці тому

    I'm a bit confused. Since it appears you load all components into the service- they're not really dynamically imported - they're dynamically rendered, but not loaded.

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 4 місяці тому

    Hi, doesn't Angular17 with ngComponentOutlet makes this simpler? thanks

  • @dipendave1048
    @dipendave1048 4 місяці тому

    What if there are multiple child component and we need to use switch case and dynamically load during runtime how can we do it?

  • @athero02yt3
    @athero02yt3 4 місяці тому

    Hi, how can i deploy mfs to azure?

  • @eddiecruz1719
    @eddiecruz1719 4 місяці тому

    Where is the part where you have backend sending data the angular service that is listening. is there a curl command or...

    • @FunOfHeuristic
      @FunOfHeuristic 4 місяці тому

      In the description you can find the BE repo link, we are using web-push here

  • @syedhannan546
    @syedhannan546 5 місяців тому

    How should we pass the access token from host app to mfe?