Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
🩢 Configure Angular’s Advanced proxyConfig

#angular #proxy

Angular’s proxyConfig provides a convenient and efficient workaround for the CORS issue during development. It essentially acts as a reverse proxy, intercepting requests from your Angular application and forwarding them to the backend server.

The key benefit is that the browser sees all requests originating from the same origin (your Angular application’s development server), thus bypassing the CORS restrictions.

In essence, the workflow is as follows:

Your Angular application running on localhost:4200 makes a request to /api/data.
β€” The proxyConfig intercepts the request.
β€” The proxyConfig forwards the request to http://localhost:8080/api/data.
β€” The backend server processes the request and sends a response back to the proxyConfig.
β€” The proxyConfig relays the response back to your Angular application.

Since the request appears to originate from the same origin, the browser happily allows the communication, and you can seamlessly develop your Angular application without the CORS headache.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4
πŸ’™ Strategies to Reduce Memory Usage

#angular #cdr #workers

Common Causes of High Memory Usage in Angular

1. Memory Leaks: Components and services not properly cleaned up can cause memory leaks.
2. Excessive DOM Manipulation: Too many DOM elements or frequent updates can increase memory consumption.
3. Large Data Objects in Memory: Keeping large objects or arrays in memory unnecessarily bloats memory usage.
4. Unoptimized Change Detection: Running change detection frequently for all components degrades performance.
5. Improper Use of Observables: Subscriptions that are not unsubscribed can lead to memory leaks.
6. Large Bundle Size: Loading too much JavaScript can impact memory consumption.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘3
πŸ€“πŸ©Ά Implementing Dependency Inversion in Angular Using Injection Tokens

#angular #services #InjectionToken

βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘2
🩷 Stop Using BehaviorSubject in Every Angular Service

#angular #signals

BehaviorSubject Is a Loaded Gun

It holds state, pushes values, and is hot by default. That means:

β€” Every new subscriber instantly gets the last value
β€” You must manually manage .next() calls
β€” It often leads to imperative logic (e.g. if (...) this._value$.next(...))
β€” And worst of all?

It gives you a stream, but not semantics.

You can’t know if the value is:

β€” Cached
β€” Live from server
β€” Derived from another value
β€” Meant to be read-only


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
2πŸ‘7❀1
❀️ Signals + HTTP = httpResource

#angular #httpResource

πŸ§ͺ Angular 19.2

The httpResource API is still experimental, but it will most likely replace all our usages of HttpClient in the near future, which is why I’m excited to share this now!


βœ… Article Link 🎁 Code Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2πŸ‘1
❀️ Stop Using setTimeout in Angular

#angular #setTimeout

What setTimeout Really Does in Angular
In JavaScript, setTimeout queues a task on the macrotask queue to be run after the current call stack clears. In a normal JS app, this is predictable.

But Angular isn’t just JavaScript β€” it uses Zone.js under the hood.

Zone.js monkey-patches setTimeout so Angular can trigger change detection after async operations.

Every time setTimeout fires, Angular knows something changed. So it runs its entire component tree check cycle.


βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2πŸ‘4❀1
πŸ€“ 🚭 ❀️ How to write scss in Angular , using mixins, variables and nesting.

#angular #scss #guide

βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘2
πŸ€“πŸ’™ Screen size change handler in Angular

#angular #BreakpointObserver

βœ… Article Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘2
πŸ’™ Tab Form Component | Angular

#angular #dynamic #dynamicComponents

⚠️ The example is for presentation purposes only and can be refactored.

βœ… Article Link | 🎁 Code Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4