- 119
- 1 330 264
Fun Of Heuristic
India
Приєднався 21 лип 2018
Hello 👋 , I am Subrat Mishra, I love to share and gather knowledge
GitHub: github.com/funOfheuristic?tab=repositories
GitHub: github.com/funOfheuristic?tab=repositories
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...
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
Hi subrat, please make a video for ANgular 17,18 to handle stand alone in micro front ends
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.
works 🙂, pls dont forget understand multer and read more documents, its not enough with this video, I had to complement
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?
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.
Hey in ionic its different, you can check capacitor to create a background task.
Another application to use Angular Elements is we can package any component/package as a Web Component to support "cross-framework".
Hi, it is helpful. As entrycomponents is deprecated in Angular 16 and in higher versions. How do we create the MFEs
Hindi wala bhi bna dete 😂
The best explaining ever 🔥🔥🔥🔥
Thanks ❤
Thanks for the so much effort you have put , really appreciate it :)
Crystal clear explanation hatss off bro❤️
Hello sir, each time we make changes to the project do we need to build it again and run http-server?
Yes if you want to rest the pwa features, for normal application change ng serve will work
I had fun learning through your videos sir. Thank you so much!
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
Quite knowledgeable video sir
Loads fine but my css is not appended in Host app . Tried adding in Concat js too . still Doesnt work . can u help here?
Load images / styles under assets folder
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
High quality drawings from😅
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 :)
The bundled file is not working on angular 17
Can you please tell or share some ref. how to create shared service from host app to remote app
Hi, How to make a platform service which is singleton and can be used across the micro frontend apps?
Error: Property 'subscribe' does not exist on type 'OperatorFunction<unknown, [arg: unknown, Obs:ervable<number>]>'
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
How to translate text from api (normally like string config) in angular app?
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
Good bro ❤
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
Clear explanation!
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!
Thx bro
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
Hold on, hold on. Is this a production ready configuration? Don't you need a reverse proxy server in front?
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
@@FunOfHeuristic really? It's not just a VPS and you can do whatever you want? Everything is already preconfigured?
why you are explaining while standing?
Hi, base app route didn't work properly in ng 17, throw some error as "is not a function"
Thank you🙌
Is this possible to make a video to make a shared auth ngrx store between mfe ?
Angular 17 micro frontend ki koi video hai
Excellent explanation
Good Explanation
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.
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?
if we dont use ngmodule, how to provide interceptors in our application?
You can add them in the providers inside bootstrapApplicqton which is present in main
I think you linked to the wrong repo for this video. Can you provide link to the code?
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.
Hi, doesn't Angular17 with ngComponentOutlet makes this simpler? thanks
What if there are multiple child component and we need to use switch case and dynamically load during runtime how can we do it?
Hi, how can i deploy mfs to azure?
Where is the part where you have backend sending data the angular service that is listening. is there a curl command or...
In the description you can find the BE repo link, we are using web-push here
How should we pass the access token from host app to mfe?