💛 NgTemplateOutlet Type Checking

#angular #directive #ngTemplateOutlet

✅ Article link

🩶 Media query matcher in Angular with RxJS, signals and NgClass

#angular #signals #service #matchMedia

To achieve the desired outcome, I’ve opted for an approach that follows this pattern:

— Create a service with a `mediaQuery()` method, which returns an RxJS Observable containing information on whether a specific breakpoint is matched or not.

— Create a property inside the component class (in the example we will call it `isMobile`, since we have only one breakpoint) and bind it the the `mediaQuery()` method previously crafted, but also converting the Observable to a signal.

— Utilize the `NgClass` directive to dynamically apply a class based on the value of the `isMobile` property.

✅ Article Link

💙 Angular: Design Patterns

#angular #patterns

Why Design Patterns are important

1. Scalability

Design Patterns help break your app into small, reusable pieces. This makes it easy to add new features later without messing up existing ones.

2. Maintainability

Following design patterns ensures your code has a clear, organized structure.

For example using patterns like the Singleton Pattern makes the app more maintainable because you only have to change one piece of code in the service, and all the components that depend on it will automatically adapt.

3. Testability

Design patterns promotes the separation of concerns which makes it easier to mock and test components

4. Code Reusability

Patterns encourage writing reusable code.

For example, patterns like Factory and Singleton help you organize similar tasks in one place, so you can easily reuse them without rewriting the same logic.

✅ Article Link

❤️ 1/2 Maximizing Productivity in Angular: Advanced Configurations in angular.json

#angular #schematics #angularjson

Angular, a popular web application framework, provides a powerful configuration file called angular.json that allows developers to fine-tune various aspects of their projects. In this article, we will explore some advanced configurations in the angular.json file to enhance your development workflow.

✅ Article Link

❤️ 2/2 Maximizing Productivity in Angular: Advanced Configurations in angular.json

#angular #schematics #angularjson

Angular, a popular web application framework, provides a powerful configuration file called angular.json that allows developers to fine-tune various aspects of their projects. In this article, we will explore some advanced configurations in the angular.json file to enhance your development workflow.

✅ Article Link

❤️ Building a Strong Angular Folder Structure

#angular #guide #folders

A well-organized folder structure is essential for developing scalable, maintainable, and efficient Angular applications. It helps teams navigate the codebase easily, promotes reusability, and streamlines the development process.

✅ Article Link

💙 Dynamically Change Angular Material Theme Colors

#angular #theme

✅ Article Link

🖤🤍 Keycloak for Angular 19+

#angular #keycloak

✅ Article Link

💙 Angular Performance with Deferrable Views

#angular #defer

✅ Article Link

❤️ Building Micro Frontends in Angular with @angular-architects/native-federation

#angular #moduleFederation

✅ Article Link

🩶 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

💙 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

🤓🩶 Implementing Dependency Inversion in Angular Using Injection Tokens

#angular #services #InjectionToken

✅ Article Link