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
โค๏ธ Angular Design Patterns: Composite

#angular #patterns #composite

The Composite pattern defines two basic types of elements sharing the same interface: simple leaves and complex containers. A container can consist of both leaves and other containers. This allows for the construction of a nested, recursive structure of objects resembling a tree.


โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ“„ How to design user-friendly forms: Aligning sections

#guide

Aligning sections may seem like a tiny detail but in reality, it makes a huge difference. The idea is to make a form easier to read by putting all the information in one direction.

Users are most likely to look at your information vertically, as itโ€™s faster and more efficient to understand all the information. With this in mind, ideally, you want to make the field names of your form vertical which will make it more accessible and help you limit any potential errors in data collection.
๐Ÿ“„ Implement the Chainable Utility Type

#ts #types #patterns

โœ… Article link
๐Ÿ“„ How to design user-friendly forms: Group fields

#guide

Sometimes, forms can be very long and complex so itโ€™s best to have clusters of information that contain titles, subtitles, or even descriptions that can facilitate the userโ€™s experience. By organising the information into blocks, the user can quickly connect each type of information.

With the main information located vertically, any additional information or instructions can be added to the left section. When adopting this method, make sure you leave space between each section so the user can easily tell which one it is.
๐Ÿ’™ Using Document API for Dynamic Component Creation

#angular #cdk #directives #dynamic

Use Case
This method can be used when you need to manipulate the DOM directly, often in scenarios where you are working with non-Angular libraries or need to integrate with existing DOM elements that are not part of Angularโ€™s template system.

Pros
โ€” Direct control over the DOM.
โ€” Can be useful for integrating with non-Angular libraries or existing scripts that manipulate the DOM directly.

Cons
โ€” Bypasses Angularโ€™s change detection and lifecycle hooks.
โ€” Can lead to issues with Angularโ€™s dependency injection and component lifecycle management.
โ€” Harder to maintain and debug.

Performance Impact
Potentially high impact due to bypassing Angularโ€™s optimized change detection. Direct DOM manipulation can also lead to performance issues if not handled properly.


โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ“„ How to design user-friendly forms: Write clear labels

#guide

The labels should be simple and easy to understand so that the user can quickly see what information to put in each field. Use simple labels to explain simple fields and add as few words as possible for each label. Hereโ€™s an easy example: use the โ€œFull Nameโ€ label instead of โ€œMy name isโ€.
๐Ÿ“ต Optimizing JavaScriptโ€™s Event Loop

#settimeout #setinterval #event_loop #requestAnimationFrame

Why setTimeout is Inaccurate? โŒ

setTimeout and setInterval in JavaScript are based on the event loop and task queue. Their execution time may vary due to several factors:

Event Loop Mechanism:

JavaScript executes code within a single event loop. If earlier tasks take a long time or the task queue is busy, the timer callback will be delayed.

Task Queue Priority:

The priority of tasks in the task queue varies. User interaction events or rendering updates might have higher priority than setTimeout and setInterval, delaying their execution.

JavaScript Engine Limitations:

The JS engine normally imposes a minimum delay; for example, nested setTimeout calls usually have a minimum delay of 4 milliseconds.

System Performance and Load:

System performance and current load can also affect timer accuracy. High system load can further delay task execution.


โœ…
Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ’™ Render Angular Components in Markdown

#angular #markdown #guide

โœ… Article link ๐ŸŽ Code Link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐ŸŒ Signals communication between components

#angular #signals #guide

โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM