DEV Community: bytebantz

Web Components in Angular: The Good and Bad of Web Components

bytebantz — Mon, 08 Sep 2025 07:26:47 +0000

Normally, Angular components work only inside Angular applications. But Angular createCustomElement() allows you to turn an Angular component into a custom HTML element (also called a web component) that can be used anywhere, even outside an Angular app while still keeping all of Angular’s features.

What Are Web Components?

Web components are a set of standards that allow developers to create custom HTML elements using JavaScript

For example, in normal HTML, you have built-in elements like < button > or < input >. But what if you want a new type of element, like < cool-button >? You can create it using JavaScript.

Web Components allow you to mix and match different UI components from various sources. However, just because you can doesn’t mean you should.

If one Web Component uses React, another Vue, and another Angular, the browser has to load separate runtimes, which:

❌Makes the page slower (more JavaScript to download and execute).

❌Increases file size (bad for performance).

❌Creates maintenance headaches (hard to manage different technologies).

Advantages of using Web Components:

✅Reusability: Custom elements allow for code sharing across different projects.

✅Flexibility: They can be used in any web application regardless of the framework.

✅Easy Integration: They can be seamlessly added to existing web applications to introduce new functionality.

✅Future-Proofing — Based on web standards, reducing framework dependency.

Challenges involved in using Web Components:

❌Browser Support: Not all browsers support web components, which can limit usage in older browsers.

❌Complexity: Creating custom elements can be challenging.

❌Debugging: Debugging custom elements, especially in complex applications, can be difficult.

Angular provides support for Web Components through Angular Elements, allowing developers to create Web Components from Angular components.

How it works

The createCustomElement() function takes an Angular component and turns it into a JavaScript class

const coolButtonElement = createCustomElement(CoolButtonComponent, { injector });

This JavaScript class can then be registered with the browser as a custom element using the browser’s built-in customElements.define() function.

customElements.define('cool-button', coolButtonElement);

The browser keeps track of all custom elements using something called the CustomElementRegistry, which links each tag (like < cool-button >) to its JavaScript class (CoolButton).

⚠️ Important Note
Avoid using your Angular component’s selector as the Web Component tag name.

For example, if your component’s selector is app-alert, and you use it as the custom element tag < app-alert >< /app-alert >, it can cause issues.

Why?

Angular might try to create two instances of the component for the same DOM element:

One instance using the regular Angular component system.
Another instance using the custom element registration.

Once you register this class with the browser’s custom element registry, it becomes a special HTML tag that you can use just like any built-in HTML element (e.g., < cool-button >< /cool-button >).

Handling Inputs & Outputs in Web Components

Handling Inputs
When you convert an Angular component into a custom element, the process automatically handles the input properties and converts them into attributes for the custom element.

Custom elements require attributes to use dash-separated lowercase names, and they don’t recognize camelCase which Angular uses for property names.

Angular automatically changes the input property names from camelCase (like myInputProp) to dash-separated lowercase (like my-input-prop) so that it fits the custom element requirements.

Handling Outputs
Angular automatically converts output events to Custom Events and uses either the original output name or the alias you provide as the event name for the custom element.

Example 1: No alias

If you have a component with this output:

@Output() valueChanged = new EventEmitter();

When the event valueChanged is triggered, it becomes a Custom Event in the DOM, and you can listen to it like this in HTML:

<my-element (valueChanged)="handleValueChanged($event)"></my-element>

Example 2: With alias

If you use an alias with the @Output():

@Output('myClick') clicks = new EventEmitter();

Then, the custom event name becomes myClick instead of clicks. You can listen to it like this:

<my-element (myClick)="handleClick($event)"></my-element>

Shadow DOM and Encapsulation

Web Components are rendered in the shadow DOM

Key Terms

Shadow Host 🏠: The regular DOM element to which a shadow DOM is attached
Shadow Tree 🌳: The DOM structure inside the shadow DOM. This tree is encapsulated, meaning styles and scripts from the main document won’t affect it unless explicitly allowed.
Shadow Boundary ✋: The invisible boundary separating the shadow DOM from the main DOM. Anything outside this boundary can’t directly style or interact with shadow DOM elements
Shadow Root 🌱: The root of the shadow tree. It’s where all shadow content starts.

Shadow DOM is a way to encapsulate styles and behavior within a web component. This means that elements inside a Shadow DOM behave as if they are in a separate, isolated world. The styles outside don’t affect them, and their styles don’t affect the rest of the page.

Why is this useful?

✅It prevents conflicts between styles and scripts from different parts of a website.

✅It allows developers to create reusable components without worrying about breaking the rest of the page.

But This Encapsulation Also Brings Challenges!
Because the Shadow DOM is isolated, certain normal browser behaviors don’t work as expected. Some events don’t bubble out of the Shadow DOM, certain form elements don’t behave normally, and even CSS has limitations.

What Are the Key Challenges?

1. Events Might Not Bubble

Normally, when you click an element, the event “bubbles up” to parent elements.
But inside the Shadow DOM, some events (like focusin) stop at the Shadow boundary and don’t continue to the outer document.

2. Some Events Behave Differently

Events like focusin and mouseenter don’t behave as expected because the Shadow DOM treats the entire component as a single unit.
A child element inside the Shadow DOM might gain focus, but the event reports that the focus is on the whole component instead.

3. CSS Encapsulation

Styles inside a Shadow DOM don’t affect elements outside it, and vice versa.
This is great for preventing unwanted style conflicts but can cause issues if you need to apply global styles to Shadow DOM elements.

Web Components and SSR

Web Components rely on browser APIs like customElements.define(), shadow DOM, and HTML templates.

These APIs don’t exist on the server, which means Web Components don’t naturally work in a server-side rendering (SSR) environment.

Developers need to create extra wrappers or tricks to make Web Components generate server-side HTML before hydration (the process of making server-rendered HTML interactive).

This adds complexity and performance overhead.

Shadow DOM and Hydration Issues

Since Web Components rely on Shadow DOM, they don’t naturally fit into modern hydration strategies.

For example, Incremental hydration depends on event delegation, meaning Angular places global event listeners on the

or a parent component to capture interactions before hydrating a component.

However, Shadow DOM blocks event delegation because:

Events do not bubble past the shadow root.
Global event listeners in Angular cannot detect interactions inside a Web Component using Shadow DOM.

What this means:

If a Web Component inside an SSR-rendered Angular app is not hydrated, clicks inside it won’t trigger Angular’s hydration logic.
Angular will never detect interactions inside a Shadow DOM unless explicitly re-dispatched.

Web Components and Angular Routing

When trying to host a second Angular app as a Web Component within another Angular application, routing often doesn’t work for the hosted app because each Angular application typically has its own isolated router instance; essentially, the parent application’s router doesn’t recognize routes defined within the child web component

Web Components Use Cases

1️⃣ Simplifying Dynamic Component Loading
Previously, if you wanted to add a component to a page dynamically (meaning you load it at runtime, not when the page is initially loaded), you had to do things like:

Create the component.
Add it to the DOM manually (the HTML structure).
Manually set up dependency injection (services, data) and change detection (keep the view updated).
Manually wire up events (like clicking buttons, etc.). This required a lot of code and was pretty complex.

With Custom Elements:

Using Angular Custom Elements makes this process much simpler. Here’s how:

Create the Angular component as usual (with your template and logic).
Convert it to a custom element using Angular’s built-in tools.
Use it in your HTML as if it were a regular HTML element (like < app-dynamic-component >< /app-dynamic-component >), and Angular takes care of all the setup, dependency injection, and event handling for you.

This results in a simplified and streamlined process for dynamically loading components, reducing the amount of code you need to write and making your app easier to maintain.

Example
Step 1: Create a New Angular Project

Run the following command in your terminal:

ng new web-components-demo

Step 2: Install the @angular/elements package:

Run the following command in your terminal:

npm install @angular/elements --save

Step 3: Create a Dynamic Component

Run the following command in your terminal:

ng generate component dynamic

Edit the dynamic.component.ts file to include some basic logic:

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  imports: [],
  template: `<div>{{ text() }}</div>`,
})
export class DynamicComponent {
  text = input<string>('Default dynamic message!');

Step 4: Register the Web Component

In your main.ts, register the DynamicComponent as a web component using Angular Elements:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { createCustomElement } from '@angular/elements';
import { DynamicComponent } from './app/dynamic/dynamic.component';

// Bootstrap the application
bootstrapApplication(AppComponent, appConfig)
  .then((app) => {
    const dynamicElement = createCustomElement(DynamicComponent, {
      injector: app.injector
    });
    customElements.define('dynamic-component', dynamicElement); // Register the web component
  })
  .catch((err) => console.error(err));

Step 5: Dynamically Load the Web Component

In your app.component.ts, create and insert the web component directly into the DOM:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="createComponent()">Create Dynamic Component</button>
    <button (click)="destroyComponent()">Destroy Dynamic Component</button>
    <div id="container"></div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  createComponent() {
    const dynamicComponent = document.createElement('dynamic-component'); // Use the registered tag name
    dynamicComponent.setAttribute(
      'text',
      'Hello, this is a dynamic web component!'
    );
    document.querySelector('#container')?.appendChild(dynamicComponent);
  }

  destroyComponent() {
    const container = document.querySelector('#container');
    if (container) {
      container.innerHTML = ''; // Clear the container to remove all dynamic components
    }
  }
}

Shared Design System

Web Components are great when you need reusable UI elements that work across different frameworks or projects.

Imagine you’re building a large-scale application that has multiple teams working on different sections of the UI. One team uses Angular, another uses React, and a third one uses Vue.

Instead of each team recreating buttons, modals, and form elements in their own framework, you can build a set of Web Components that work everywhere.

How This Helps

✅ Framework-Agnostic: A Web Component like can be used in React, Vue, Angular, or even plain HTML.
✅ Single Source of Truth: Instead of maintaining separate versions of the same button in different frameworks, you maintain one component.
✅ Consistent UI: The design stays the same no matter where it’s used.

Example
Step 1: Create a new Angular project

Run the following command:

ng new shared-design-system

Step 2: Generate a new Angular element (Web Component)

ng generate component my-button

Step 3: Modify my-button.component.ts

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-my-button',
  imports: [],
  template: `<button class="my-button">{{ label() }}</button>`,
  styles: [
    `.my-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }`
  ]
})
export class MyButtonComponent {
  label = input<string>('Click Me');
}

Step 4: Convert it into a Web Component

Modify main.ts:

import { createApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { createCustomElement } from '@angular/elements';
import { MyButtonComponent } from './app/my-button/my-button.component';


// Bootstrap the application
createApplication(appConfig)
  .then((app) => {
    const myButtonElement = createCustomElement(MyButtonComponent, {
      injector: app.injector
    });
    customElements.define('my-button', myButtonElement); // Register the web component
  })
  .catch((err) => console.error(err));

The key reason createApplication is better for pure Web Components is that it does not automatically render a root component in Angular, unlike bootstrapApplication. Instead, it only initializes the Angular injector and allows you to register custom elements manually.

Step 5: Build the Angular Web Component

Run:

ng build --output-hashing=none

Step 6: Test the Web Component

To support older browsers, polyfills may be needed to provide support for web components.

If you import polyfills in main.ts, they become part of your main JavaScript bundle. This is fine if you’re only using one Angular web component.

If you embed multiple custom elements (Angular web components) on a page, each one might load the same polyfills multiple times. This can slow down your app or cause errors.

Instead of importing polyfills inside main.ts, you can load them separately using a < script > tag in your HTML. This way, they are loaded only once for all components.

Create a simple index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Web Component Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <my-button></my-button>

    <script src="polyfills.js" type="module"></script>
    <script src="main.js" type="module"></script>
  </body>
</html>

How to make your custom elements type-safe

In standard DOM methods like document.createElement() or document.querySelector(), TypeScript infers the type of the element returned based on the argument you provide.

For example:

document.createElement(‘a’) returns an HTMLAnchorElement with specific properties like href.
document.createElement(‘div’) returns an HTMLDivElement, which doesn’t have an href property.

However, when using custom elements, TypeScript can’t automatically infer the type because it doesn’t know the specific properties of that element.

It just thinks it’s a basic HTMLElement (a generic HTML element). For example, it doesn’t know your my-dialog element has a content property.

You have two ways to get TypeScript to understand the properties of your custom elements:
1. Casting the Type Manually

When you create the custom element, you can cast it to a more specific type that knows about the properties it has.

For example:

const dialog = document.createElement('my-dialog') as NgElement & WithProperties<{ content: string }>;
dialog.content = 'Hello, world!';  // Now TypeScript knows 'content' is a string

This way, TypeScript will now know that dialog.content should be a string and give you features like type checking and autocomplete.

The downside:

You have to write this casting (as NgElement & WithProperties) every time you create a custom element.

2. Augmenting TypeScript’s Default Knowledge of Elements

Instead of casting every time, you can tell TypeScript about your custom elements once by adding a special definition.

This is done by extending the HTMLElementTagNameMap which is how TypeScript knows what properties different HTML tags should have.

For example, you can add this globally:

declare global {
  interface HTMLElementTagNameMap {
    'my-dialog': NgElement & WithProperties<{ content: string }>;
  }
}

Now, you don’t need to cast the element manually every time:

const dialog = document.createElement('my-dialog');
dialog.content = 'Hello, world!';  // TypeScript knows 'content' is a string automatically

Using augmentation is simpler and avoids repetitive code. It ensures TypeScript automatically knows the properties of your custom elements, making your code cleaner.

Conclusion

Web Components provide a powerful way to create reusable UI elements that can work across different frameworks. By using Angular Elements, you can easily create and manage these components while maintaining the benefits of Angular’s architecture.

Say Goodbye to EventEmitter: Switch to output() for Custom Events in Angular

bytebantz — Wed, 03 Sep 2025 09:52:41 +0000

In Angular, components can communicate with each other by raising events. For example, when a user clicks a button inside a component, you might want to notify its parent component about that action.

To do that, Angular allows us to define custom events using the @Output decorator and EventEmitter (old way) or the output() function (new way).

This enables you to create events that can be emitted and handled by parent components, similar to native DOM events.

Old Way: Using @Output and EventEmitter

The traditional approach is as follows:

You define an event using the @Output decorator and an instance of EventEmitter.
You emit the event using .emit().

New Way: Using the output Function

Now, Angular introduces a simplified syntax to define custom events without needing EventEmitter.

Instead of using @Output() and EventEmitter, you can use the output() function directly.

The newer approach eliminates the need to explicitly instantiate an EventEmitter, which simplifies code and reduces boilerplate.

Even though the syntax is different, the behavior is exactly the same as the old approach. You still emit events, pass data with them, and listen for them from the parent component.

Basic Setup

To create a custom event, you define a property in your component using the output function, which returns an OutputEmitterRef.

import { Component, output } from '@angular/core';

@Component({
  selector: 'child-component',
  template: `<button (click)="sendData()">Click Me</button>`,
})
export class ChildComponent {
  dataSent = output<string>(); // No need to import EventEmitter

  sendData() {
    this.dataSent.emit('Hello, Parent!');
  }
}

In this case, the output function does exactly what EventEmitter did, but in a more compact form.

Whether you’re using the old or new way, the way you listen for the event in the parent component is the same.

In the parent component, you can listen for the dataSent event using the regular event binding syntax (eventName) and call a method when the event is triggered.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <child-component (dataSent)="receiveData($event)"></child-component>
    <p>{{ receivedMessage }}</p>
  `,
})
export class ParentComponent {
  receivedMessage: string = '';

  // Method to handle the received data from the child component
  receiveData(message: string) {
    this.receivedMessage = message; // Store the message received from the child
  }
}

Customizing Output Names

You can specify a custom name for the event in the template using the alias option

changed = output({alias: 'valueChanged'});

· The alias option only affects how the event is referenced in the template, not in TypeScript code.

· In the TypeScript code, the original name of the output property is used (in this case, changed).

· In the template, the alias name valueChanged is used to listen for the event.

Subscribing to Outputs Programmatically

When dynamically creating components in Angular, you might want to listen for events emitted by the component, for example, when a button inside the dynamically created component is clicked.

You can do this by subscribing to their output events programmatically using subscribe.

After creating the dynamic component in the parent component, we can subscribe to its event property to listen for it.

When the event is emitted, the subscription in the parent component’s code will receive the emitted data and can take an action based on it, such as logging it to the console, updating the UI, or performing some other logic.

const componentRef = viewContainerRef.createComponent(SomeComponent);

// Subscribe to the dynamically created component's output event
componentRef.instance.someEventProperty.subscribe((eventData) => {
  console.log(eventData); 
});

You can also unsubscribe manually:

const eventSubscription = componentRef.instance.someEventProperty.subscribe(eventData => {
  console.log(eventData);
});

eventSubscription.unsubscribe();

Key Points about Custom Events

Custom events do not bubble: In native DOM events, when an event is triggered, it can propagate up from the target element to its ancestors, allowing parent elements to listen for events on child elements. However, custom events in Angular do not bubble.
Case sensitivity: Output names are case-sensitive.
Inheritance: When a component extends another, it inherits the outputs from the parent component. This means child component automatically inherits the output (custom event) from the parent and can listen to or trigger it without needing to redefine the event.
Event names: Choose event names carefully to avoid conflicts with native DOM event names like click, focus, etc.

Conclusion

In conclusion, Angular provides two approaches for component communication through custom events: the traditional method using @Output() and EventEmitter, and the newer, simpler output() function. The newer approach eliminates the need for importing EventEmitter and reduces boilerplate code, making the code more concise and easier to maintain.

Why you should use @use instead of @import in Angular Projects

bytebantz — Tue, 02 Sep 2025 13:57:37 +0000

Before the introduction of @use, developers used @import to bring styles from different files into one. However, @import had some issues:

It could import the same file multiple times, leading to bloated CSS.
It pulled in everything from the imported file, even unused styles.
It caused naming conflicts when multiple files had variables with the same name.

To fix these, Sass introduced @use, which:

✔ Loads each file only once.
✔ Uses namespaces to avoid variable conflicts.
✔ Helps make CSS more optimized by importing only what’s needed.

Example: @ import (Old way)

// colors.scss
$primary-color: blue;
$secondary-color: red;


// styles.scss
@import 'colors';

body {
  background-color: $primary-color;
}

Problem: If colors.scss is imported multiple times across different files, it could cause duplication.

Example: @ use (New way)

// colors.scss
$primary-color: blue;
$secondary-color: red;

// styles.scss
@use 'colors';

body {
  background-color: colors.$primary-color;  // Notice the namespace "colors."
}

Why is this better?

The @use statement ensures colors.scss is only loaded once.
Variables need to be prefixed with the file name (colors.$primary-color), preventing conflicts.

Using @use with an Alias

Instead of typing colors.$primary-color every time, we can shorten it using as:

@use 'colors' as c;

body {
  background-color: c.$primary-color;
}

Benefit: Shorter and more readable.

@use in Angular Material
Angular Material switched to @ use for theming.

Old way (@import):

@import '@angular/material';
$my-primary: mat-palette($mat-indigo);

New way (@use):

@use '@angular/material' as mat;
$my-primary: mat.define-palette(mat.$indigo-palette, 500);

Understanding @forward rule in Sass

The @ forward rule in Sass works together with @ use to organize and control access to styles.

It allows you to re-export styles from one file to another while keeping some variables, mixins, or functions private.

Before Sass introduced @ forward, using @ import meant that everything in a file was always accessible, leading to bloated styles and naming conflicts.

If you want to explicitly control which variables get exposed, you can use @forward with the show keyword.

Example: Forwarding Only Some Variables

If you only want to expose specific variables, use show:

_colors.scss

$primary-color: blue;
$secondary-color: red;
$private-color: black; // ❌ Should not be public

@forward 'colors' show $primary-color, $secondary-color;

main.scss

@use 'colors';

body {
  background-color: colors.$primary-color; // ✅ Works
  color: colors.$secondary-color;          // ✅ Works
  border: 1px solid colors.$private-color; // ❌ ERROR! Not exposed
}

If you use @ forward without show, then all public variables, mixins, and functions from that module are automatically forwarded and accessible.

Example: Forwarding Everything

_colors.scss

$primary-color: blue;
$secondary-color: red;
$private-color: black; // This is still public unless restricted

@forward 'colors'; // ✅ Everything is forwarded

main.scss

@use 'colors';

body {
  background-color: colors.$primary-color; // ✅ Works
  color: colors.$secondary-color;          // ✅ Works
  border: 1px solid colors.$private-color; // ✅ Also works
}

Since @forward is used without show, public variables, mixins, and functions from _colors.scss are available in main.scss

Conclusion

In short, @ use provides better performance, prevents conflicts, and ensures cleaner, more efficient stylesheets, making it the preferred choice for modern Sass development.

Angular Best Practices Every Developer Needs to Know

bytebantz — Tue, 02 Sep 2025 11:29:20 +0000

Writing clean, maintainable, and performant Angular applications requires following best practices that enhance readability, testability, and performance.

Here are 6 key principles every Angular developer should follow:

1. Avoiding logic in Angular templates

Avoiding logic in Angular templates helps maintain cleaner, more maintainable code. Here’s why and how you should do it:

Why Avoid Logic in Templates?

1. Performance Optimization — Function calls in templates are executed repeatedly during change detection, which can impact performance.

2. Better Testability — Moving logic to the component makes it easier to write unit tests.

3. Improved Maintainability — Keeping business logic separate from the template reduces the risk of breaking functionality when modifying the UI.

4. Enhanced Readability — Templates remain clean and focused on presentation rather than logic.

How to Extract Logic from Templates

Instead of doing this:

<div *ngIf="isUserLoggedIn()">{{ getUserName() }}</div>

Move the logic to the component:

export class ExampleComponent {
  isLoggedIn = false;
  userName = '';

  constructor(private authService: AuthService) {
    this.isLoggedIn = this.authService.isAuthenticated();
    this.userName = this.authService.getUserName();
  }
}

Then use it in the template:

<div *ngIf="isLoggedIn">{{ userName }}</div>

This ensures the function isn’t re-evaluated unnecessarily and improves performance.

2. Using Aliases for Cleaner Imports

In a deep folder structure, import paths can become long and messy.

Using aliases can help keep your import paths clean and manageable in such projects with deep folder structures.

Example of bad imports:

import { MyComponent } from '../../../components/MyComponent';

This import path is long, hard to understand, and can easily break when files are moved around.

Instead, aliases allow you to define a short path to access files and components, improving clarity and reducing the chances of errors.

In Angular projects, aliases are set up in the tsconfig.json file.

Here’s an example:

In the tsconfig.json file, we will use the paths property to define aliases.

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@app/*": ["src/app/*"],
    "@services/*": ["src/app/services/*"],
    "@components/*": ["src/app/components/*"]
  }
}

Once you’ve set up your aliases, you can use them in your imports.

For example:

import { MyComponent } from '@components/MyComponent';

Instead of writing a long import path like:

import { MyComponent } from '../../../components/MyComponent';

How Aliases Improve Your Workflow:

Improved Readability: Aliases make it clear where your files are located. For instance, @components or @services give a clear context of what’s being imported, making your codebase easier to navigate.
Refactoring Made Easy: You can move files, folders, or entire sections of your application without worrying about breaking import paths throughout your project.
Consistency: With aliases, your import paths are consistent across the entire project, reducing the chance of errors.

3. Avoid Nested Subscriptions in RxJS

When handling multiple streams of data (like user input, API requests, or events), a common mistake is subscribing inside another subscription.

This leads to the following main problems:

Multiple ongoing requests → If a new request starts before the previous one finishes, multiple requests run at the same time.
Race conditions → The responses don’t always come back in order, so old data can overwrite new data.
Memory leaks → Unnecessary active subscriptions can slow down the app and use extra memory.

Instead, we should use switchMap

switchMap makes sure that only the latest request is completed and all previous requests are canceled

How This Looks in Code (Nested Subscriptions)

pickupLocation$.subscribe(location => {
  findDriver$(location).subscribe(driver => {
    console.log(`Driver assigned: ${driver}`);
  });
});

Problem:

If you update your location multiple times, multiple driver searches run at the same time.
The first request may return after the second, assigning the wrong driver.

Using switchMap (Cancels Old Requests)

pickupLocation$.pipe(
  switchMap(location => findDriver$(location)) // Cancels old requests
).subscribe(driver => {
  console.log(`Driver assigned: ${driver}`);
});

Fixed Problems:

Only one active search at a time (old requests are canceled).
Always get the correct driver for your latest request (no outdated responses).

Using switchMap ensures only the latest request matters, preventing outdated responses, unnecessary operations

4. Breaking large components into smaller, reusable component

As an Angular application grows, components tend to become large and difficult to maintain.

A single component that handles multiple responsibilities is harder to debug, test, and manage.

So, the idea is to split the large component into smaller ones that follows the Single Responsibility Principle (SRP), meaning each handle a specific task.

This way, you can test, debug, and reuse each smaller component more easily.

Example: Transforming a Large Component

Let’s say we have a large Angular component that:

Displays a list of items.
Filters items based on a search input.
Before Splitting: The Large Component

<!-- main.component.html -->
<div>
  <input [(ngModel)]="searchTerm" placeholder="Search..." />
  <div *ngFor="let item of filterItems(items, searchTerm)">
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
  </div>
</div>

// main.component.ts
export class MainComponent {
  items = [
    { title: 'fist item', description: 'Description of Item 1' },
    { title: 'second item', description: 'Description of Item 2' },
    { title: 'third item', description: 'Description of Item 3' }
  ];
  searchTerm = '';

  filterItems(items: any[], term: string) {
    return items.filter((item) => item.title.includes(term));
  }
}

After Splitting: Smaller Components

To make the component more reusable, we break it down into:

1. Search Bar Component — Handles search input.
2. Item List Component — Displays a list of items.
3. Item Component — Displays a single item.
4. Search Bar Component (search-bar.component.ts)

<!-- search-bar.component.html -->
<input [(ngModel)]="searchTerm" (input)="search.emit(searchTerm)" placeholder="Search..." />

// search-bar.component.ts
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
})
export class SearchBarComponent {
  @Output() search = new EventEmitter<string>();
  searchTerm: string = '';
}

2. Item Component (item.component.ts)

<!-- item.component.html -->
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>

// item.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
})
export class ItemComponent {
  @Input() item: any;
}

3. Item List Component (item-list.component.ts)

<!-- item-list.component.html -->
<div *ngFor="let item of items">
  <app-item [item]="item"></app-item>
</div>

// item-list.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
})
export class ItemListComponent {
  @Input() items: any[] = [];
}

4. Updated Main Component (main.component.ts)

<!-- main.component.html -->
<app-search-bar (search)="searchTerm = $event"></app-search-bar>
<app-item-list [items]="filterItems(items, searchTerm)"></app-item-list>

// main.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
})
export class MainComponent {
  items = [
    { title: 'Item 1', description: 'Description of Item 1' },
    { title: 'Item 2', description: 'Description of Item 2' },
    { title: 'Item 3', description: 'Description of Item 3' }
  ];
  searchTerm = '';

  filterItems(items: any[], term: string) {
    return items.filter((item) => item.title.includes(term));
  }
}

Why Break Large Components?

- Easier to Debug & Maintain — Smaller components mean fewer things can go wrong. If a bug appears, it’s easier to isolate and fix.

- Better Code Organization — Each component handles one task, making the project easier to navigate.

- Better Reusability — Extracting common UI elements prevents duplicate code.

- Improved Readability — Smaller files are easier to navigate.

- Faster Testing — Unit testing becomes much simpler because each component has a single purpose.

5. Documenting code

Documenting code with comments is an excellent practice, because it improves code maintainability, readability, and collaboration, making it easier for new developers (or even yourself in the future) to understand the logic.

Example 1: Documenting a Method

/**
 * This method converts a given age into a string.
 * It takes a number as input and returns the string version of it.
 * 
 * @param age The age value to be converted.
 * @returns A string representation of the age value.
 */
function getAge(age: number): string {
  return age.toString();
}

Example 2: Documenting a Variable

For class variables, documenting them can also be helpful.

class UserProfile {
  /**
   * The name of the user.
   * This is typically initialized when the user registers.
   * @example "John Doe"
   */
  userName: string;

  /**
   * The age of the user in years.
   * This is an optional field and may not be available for every user.
   * @example 28
   */
  userAge?: number;
}

Angular Example: Documenting a Service Method

In Angular services, you can document methods as follows:

@Injectable({
  providedIn: 'root'
})
export class UserService {
  /**
   * Fetches user data from the backend API.
   * It sends a GET request to retrieve the user's profile information.
   * 
   * @param userId The ID of the user whose data is to be fetched.
   * @returns An Observable of the user's data.
   */
  getUserData(userId: string): Observable<User> {
    return this.http.get<User>(`/api/users/${userId}`);
  }
}

Using clear, consistent commenting practices like this will make your code much more understandable.

6. Keep components lean by delegating complex logic to services.

In Angular, components and templates serve distinct roles in the app architecture.

The general rule is: components handle the logic, and templates handle the view. However, to avoid bloating your components with too much logic, it’s best to delegate business logic to services.

Example: Without a Service (Bad Practice)

Here, the component is doing too much.

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  template: `<div *ngFor="let product of products">{{ product.name }}</div>`,
})
export class ProductsComponent {
  products = [
    { id: 1, name: 'Jacket' },
    { id: 2, name: 'Sneakers' },
  ];

  filterProducts(search: string) {
    return this.products.filter(product => product.name.includes(search));
  }
}

The filtering logic should be handled by a service instead.

Example: With a Service (Good Practice)

Move the logic to a service and inject it into the component.

Step 1: Create the Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  private products = [
    { id: 1, name: 'Jacket' },
    { id: 2, name: 'Sneakers' },
  ];

  getProducts() {
    return this.products;
  }

  filterProducts(search: string) {
    return this.products.filter(product => product.name.includes(search));
  }
}

Step 2: Use the Service in the Component

import { Component } from '@angular/core';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-products',
  template: `<div *ngFor="let product of filteredProducts">{{ product.name }}</div>`,
})
export class ProductsComponent {
  filteredProducts = [];

  constructor(private productService: ProductService) {
    this.filteredProducts = this.productService.getProducts();
  }

  searchProducts(search: string) {
    this.filteredProducts = this.productService.filterProducts(search);
  }
}

Why Delegate Logic to Services?

- Separation of Concerns — The component handles UI, and the service handles logic.

- Reusability — ProductService can be used in multiple components.

- Testability — We can test the service separately.

- Maintainability — Easier to modify or expand.

Conclusion

By applying these best practices, your Angular applications will be more efficient, maintainable, and scalable.

Common Security Vulnerabilities in Angular Applications and How to Fix Them

bytebantz — Wed, 26 Mar 2025 10:36:43 +0000

In this article, we’ll explore common security issues in Angular applications, how attackers exploit them, and how to secure your code.

1. Cross-Site Scripting (XSS)

XSS occurs when an application allows malicious scripts to execute in the browser.

Angular sanitization is a built-in mechanisms that checks untrusted content and ensures it’s safe for the DOM.

Angular cleans HTML by removing dangerous tags like <script>, blocks unsafe URLs (javascript: schemes), and prevents harmful CSS.

Angular automatically sanitizes values bound [innerHTML], <a [href]>, <img [src]>, and [style] to protect your app.

However, you can still introduce vulnerabilities if you intentionally bypass security mechanisms or manipulate the DOM directly.

Here are some examples of vulnerable code:

Vulnerability 1: Using bypassSecurityTrustHtml Unsafely

The bypassSecurityTrustHtml method forces Angular to trust the provided HTML, including unsafe content like <script> tags.

Angular’s DomSanitizer can be misused to allow malicious scripts.

Vulnerable Code:

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-inner-html-binding',
  template: `<div [innerHTML]="trustedHtmlSnippet"></div>`,
})
export class InnerHtmlBindingComponent {
  trustedHtmlSnippet: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const potentiallyUnsafe = 'Template <script>alert("0wned")</script>';
    this.trustedHtmlSnippet = this.sanitizer.bypassSecurityTrustHtml(potentiallyUnsafe);
  }
}

Safer Approach:

Instead of bypassing security, let Angular sanitize the HTML automatically:

import { Component } from '@angular/core';

@Component({
  selector: 'app-inner-html-binding',
  template: `<div [innerHTML]="safeHtmlSnippet"></div>`,
})
export class InnerHtmlBindingComponent {
  safeHtmlSnippet = 'Template <script>alert("0wned")</script>'; // Angular will sanitize this automatically
}

Vulnerability 2: Directly Manipulating the DOM (ElementRef)

Angular’s built-in XSS protection only works in templates, but direct DOM manipulation bypasses it.

Using ElementRef and innerHTML allows unsafe content insertion.

Vulnerable Code:

import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="comment" placeholder="Enter your comment">
    <button (click)="postComment()">Post Comment</button>
    <div #commentBox></div>
  `,
})
export class AppComponent {
  @ViewChild('commentBox', { static: true }) commentBox!: ElementRef;
  comment: string = '';

  postComment() {
    this.commentBox.nativeElement.innerHTML = this.comment; // ⚠ Vulnerable to XSS!
  }
}

By default, modern browsers block scripts inserted via innerHTML (they won't execute <script> tags).

However, attackers can still exploit XSS without using <script> tags by injecting malicious event handlers like onerror, onclick, or onmouseover.

<img src="x" onerror="alert('Hacked!')">

Since the app is directly inserting user input into the DOM, if a user submits the comment above, the <img> tag loads, fails (because src="x" is invalid), and triggers the onerror JavaScript, showing an alert box. This is a Cross-Site Scripting (XSS) attack.

Fix: Use Angular’s Sanitization

To avoid XSS, use [innerHTML] instead of ElementRef.innerHTML:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="comment" placeholder="Enter your comment">
    <button (click)="postComment()">Post Comment</button>
    <div [innerHTML]="safeComment"></div>
  `,
})
export class AppComponent {
  comment: string = '';
  safeComment: string = '';

  postComment() {
    this.safeComment = this.comment; // Angular sanitizes input automatically
  }
}

2. Clickjacking

Clickjacking is when someone tricks you into clicking on something different from what you think you're clicking on.

For example, they might overlay a malicious button on top of a legitimate one, so when you click, you're actually interacting with something you didn't intend to.

Attackers can embed your Angular app inside an <iframe> and overlay a fake UI to steal user inputs.

To check if your website can be embedded in an <iframe>, create an HTML file (e.g., clickjack-test.html) and add this code:

<iframe src="https://your-angular-app.com" width="800" height="600"></iframe>

Example of Clickjacking in Action:

1. The Fake Job Ad

A scammer creates a webpage claiming: "Earn $500 per day! Click below to apply!"
This fake ad targets people searching for jobs.

2. The Clickjacking Trick

The fake page loads a real job posting inside an invisible iframe.
A hidden "Like" or "Follow" button is placed over the real "Apply Now" button.
When the user clicks "Apply Now," they actually like or follow a scam page instead.

3. The Redirection to Avoid Suspicion

After the hidden click happens, the user is redirected to the real job listing.
The victim sees a legitimate job post, making them think everything is normal.
They never realize they just followed a scam page!

Why Scammers Use Clickjacking:

They collect thousands of likes or follows for credibility.
They post fake job offers to lure victims.
Users click on scam links, thinking they are real opportunities.
Some are tricked into paying fake "registration fees."

Secure Fix

Angular does not have a specific built-in mechanism solely dedicated to preventing clickjacking out of the box.

Set X-Frame-Options and Content-Security-Policy headers in the backend:

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';

This prevents clickjacking by blocking the site from being embedded in iframes.

3. Cross-Site Request Forgery (CSRF)

CSRF is an attack where a malicious website tricks a user's browser into sending unintended requests to a different website where the user is authenticated.

CSRF attacks are possible because web browsers automatically include cookies, including session cookies that contain authentication information, in every request

If the server does not validate the request properly (e.g., checking for an anti-CSRF token or validating the Origin header), an attacker can still trick a logged-in user into making unintended changes.

Imagine you have an account on FastPizza (https://fastpizza.com), where you order food regularly.

How It Works Normally:

You log in and go to Settings → Change Email, where you enter a new email.

The website sends this request:

POST https://fastpizza.com/update-email
Content-Type: application/x-www-form-urlencoded

email=mynewemail@example.com

The Attack (CSRF Exploit)

You are already logged into FastPizza in one tab.

You then visit a malicious website, maybe a recipe blog or a free giveaway site.

The hacker creates this hidden form into the page:

<form action="https://fastpizza.com/update-email" method="POST">
    <input type="hidden" name="email" value="hacker@example.com">
</form>
<script>
    document.forms[0].submit(); // Automatically submits the form when the victim visits
</script>

If the victim is logged in, their session cookie is sent automatically.
The server processes the request and updates the email without any additional verification.
Now, the attacker's email is linked to the victim’s account.

Secure Fix

Use CSRF tokens in HTTP requests:

Angular's HttpClient helps prevent these attacks using a token system:

The backend server creates a special security token (usually named XSRF-TOKEN) and stores it in a cookie when the user loads the page.
Angular automatically reads this token and includes it in the request headers under X-XSRF-TOKEN.

If it’s not working automatically, create an Interceptor to manually extract the token.

3.The backend checks if the request contains a valid token before allowing it to change data.

If your backend uses different token names, you can configure Angular to use them:

provideHttpClient(
  withXsrfConfiguration({
    cookieName: 'CUSTOM_XSRF_TOKEN',
    headerName: 'X-Custom-Xsrf-Header',
  }),
)

4. DOM Clobbering

DOM Clobbering is an attack where an attacker manipulates the DOM properties to override JavaScript variables or elements, causing unintended behavior.

Imagine a user is trying to update their password on a website. If the frontend is vulnerable to DOM Clobbering, an attacker can inject their own password, causing the victim’s password to be changed to one controlled by the attacker.

Vulnerable Code:

<form id="updatePasswordForm">
  <input type="password" name="newPassword" placeholder="Enter new password" />
  <input type="password" name="confirmPassword" placeholder="Confirm new password" />
  <button type="submit">Update Password</button>
</form>

<script>
  const newPasswordInput = document.querySelector('input[name="newPassword"]');

  document.getElementById('updatePasswordForm').addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('Updating password to:', newPasswordInput.value);
  });
</script>

Malicious Injection

An attacker injects the following malicious hidden input field into the page:

Since JavaScript automatically associates elements with global variables, document.getElementById('newPassword') now points to the hidden field instead of the real input.

Instead of their chosen password, "hackedPassword123" is sent to the server.

The attacker can now log in using the victim’s account.

Secure Fix Using Angular Reactive Forms

To prevent this attack, avoid querySelector() and use Angular’s Form Controls to securely reference inputs.

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
      <input type="password" formControlName="newPassword" placeholder="Enter new password">
      <input type="password" formControlName="confirmPassword" placeholder="Confirm new password">
      <button type="submit">Update Password</button>
    </form>
  `,
})
export class AppComponent {
  passwordForm = new FormGroup({
    newPassword: new FormControl('', [Validators.required]),
    confirmPassword: new FormControl('', [Validators.required])
  });

  onSubmit() {
    console.log('Updating password to:', this.passwordForm.get('newPassword')?.value);
  }
}

Conclusion

By understanding these vulnerabilities and implementing Angular’s built-in security mechanisms and recommended practices, developers can significantly enhance the security posture of their applications.

Design Patterns Every Angular Developer Should Know

bytebantz — Mon, 24 Mar 2025 17:25:13 +0000

New developers might not consider how the code will handle future changes or how easily it can be reused, expanded, or maintained. In the worst-case scenario, developers might even need to completely rebuild the project from scratch when things become too hard to fix. To avoid these issues, design patterns were created.

Design patterns are like blueprints that make your code easier to manage and change over time.

Design patterns are tried-and-tested solutions for common design issues in software development. Instead of giving a full solution, they act as best practices for solving common software design challenges.

Design patterns in Angular help you write cleaner, more organized code that makes your app easier to build, grow, and fix over time.

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.

1. Singleton Pattern

The Singleton Pattern ensures that a class only has one instance and allows that instance to be shared globally.

In Angular, this is often used for services, making sure only one instance of a service is used throughout the app.

A service becomes a singleton when it's provided at the root level. To do this, you use the providedIn: 'root' setting in the service’s metadata.

Example:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // This makes the service a singleton
})
export class MyService {
  constructor() { }

  // Your service methods here
}

2. Facade Pattern

The Facade Pattern offers a simplified interface to interact with complex subsystems.

When you don’t use the Facade Pattern, components directly communicate with multiple services to handle different operations. This increases complexity as multiple components may replicate the same logic, leading to code duplication.

With the Facade Pattern instead of components calling multiple services, they interact with the facade. This makes the components leaner and easier to maintain, while business logic remains in one centralized place (the facade)

Example

@Injectable({
  providedIn: 'root',
})
export class CartFacade {
  constructor(private cartService: CartService, private orderService: OrderService) {}

  // Add product to cart
  addToCart(product: Product) {
    this.cartService.addItem(product);
  }

  // Remove product from cart
  removeFromCart(product: Product) {
    this.cartService.removeItem(product);
  }

  // Process checkout using the current cart
  checkout() {
    const cart = this.cartService.getCart();
    this.orderService.processOrder(cart);
  }

  // Get the current items in the cart
  getCartItems() {
    return this.cartService.getCart();
  }
}

To use the Facade Pattern in your Angular components, you simply inject the facade service into the component.

constructor(private cartFacade: CartFacade) {}

3. Factory Pattern

The Factory Pattern is a way of creating objects without specifying the exact class of the object that will be created.

It handles the object creation process and conceals the details of how instances are instantiated.

The Factory Pattern can create objects dynamically, which is useful of you don’t know in advance the exact objects/services your application will need at runtime

Example

Let's say you want to create different types of user notifications (e.g., email, SMS). You can implement the Factory Pattern as follows:

// src/app/notification.interface.ts // src/app/notification.interface.ts
export interface Notification {
  send(message: string): void;
}

// src/app/notification.service.ts
import { Injectable } from '@angular/core';
import { Notification } from './notification.interface';

@Injectable({
  providedIn: 'root',
})
export class EmailNotification implements Notification {
  send(message: string): void {
    console.log(`Email: ${message}`);
  }
}

@Injectable({
  providedIn: 'root',
})
export class SmsNotification implements Notification {
  send(message: string): void {
    console.log(`SMS: ${message}`);
  }
}

Now, let’s create a factory

// src/app/notification.factory.ts
import { Injectable } from '@angular/core';
import { EmailNotification } from './notification.service';
import { SmsNotification } from './notification.service';
import { Notification } from './notification.interface';

@Injectable({
  providedIn: 'root',
})
export class NotificationFactory {
  constructor(
    private emailNotification: EmailNotification,
    private smsNotification: SmsNotification
  ) {}

  createNotification(type: string): Notification {
    if (type === 'email') {
      return this.emailNotification;
    } else if (type === 'sms') {
      return this.smsNotification;
    } else {
      throw new Error('Unknown notification type');
    }
  }
}

Now, in your component, you can use the factory like this:

// src/app/notification/notification.component.ts
import { Component } from '@angular/core';
import { NotificationFactory } from '../notification.factory';
import { Notification } from '../notification.interface';

@Component({
  selector: 'app-notification',
  template: `
    <h1>Send Notification</h1>
    <button (click)="send('email')">Send Email</button>
    <button (click)="send('sms')">Send SMS</button>
  `,
})
export class NotificationComponent {
  constructor(private notificationFactory: NotificationFactory) {}

  send(type: string) {
    const notification: Notification = this.notificationFactory.createNotification(type);
    notification.send(`This is a ${type} notification!`);
  }
}

4. Strategy Pattern

Strategy Pattern deals with behaviors (algorithms) and how they are used.

Strategy patterns are useful when you need to switch between different algorithms or functionalities based on the context.

Example

This service will dynamically select the payment method based on the user’s choice.

@Injectable({
  providedIn: 'root',
})
export class PaymentService {
  constructor(private paypalPayment: PayPalPayment, private creditCardPayment: CreditCardPayment) {}

  processPayment(method: 'paypal' | 'creditcard', amount: number): string {
    if (method === 'paypal') {
      return this.paypalPayment.processPayment(amount);
    } else {
      return this.creditCardPayment.processPayment(amount);
    }
  }
}

Conclusion

Design patterns provide crucial benefits in terms of scalability, maintainability, testability, and code reusability. In Angular, using patterns like Singleton, Facade, Factory, and Strategy will help you build applications that are easier to manage and expand. These patterns are essential for any large or growing application where clean, organized, and maintainable code is a priority.

Understanding :host and :host-context in Angular Styling

bytebantz — Mon, 24 Mar 2025 12:37:39 +0000

When styling Angular components, you can’t simply target them using standard CSS selectors like you would with regular HTML elements. Instead, Angular provides special selectors like :host and :host-context to help style components effectively.

What is :host?

The :host selector is a special CSS rule in Angular that allows you to apply styles to the root element of a component.

Why do we need it?

Normally, in CSS, you can target elements directly. But in Angular, components are custom elements, and you cannot style them the usual way.

Example

Let’s say we are building a User Profile Card component in Angular.

<app-user-card>
    <img src="profile.jpg" alt="User Photo">
    <h3>John Doe</h3>
    <p>Web Developer</p>
</app-user-card>

If we try to add a border to this app-user-card in the component's CSS file:

app-user-card {
    border: 2px solid black;
    padding: 10px;
}

👉 This will not work because app-user-card is an Angular component and not a standard HTML element.

Solution: Use :host

We can use :host to target the root element:

:host {
  display: block;
  border: 2px solid black;
  border-radius: 0.375em;
  background-color: #eee;
}

✅ Now, the styles apply to the root element of the app-user-card component.

Conditional Styling Using :host(.class-name)

Sometimes, you only want to apply styles when the component has a certain class.

Example

Imagine we want to highlight premium users with a golden border.

<app-user-card class="premium">
    <img src="profile.jpg" alt="User Photo">
    <h3>Jane Smith</h3>
    <p>Premium Member</p>
</app-user-card>

Now, in our component's CSS:

:host(.premium) {
    display: block;
    border: 2px solid gold;
    border-radius: 0.375em;
    background-color: #eee;
}

✅ Now, these styles apply only when the premium class is present on app-user-card. If we remove the class="premium", the styles won’t apply.

What is :host-context?

The :host-context selector allows us to apply styles based on where the component is used.

:host-context(selector) applies styles only when the component is inside an element matching the given selector.

Using :host-context

Imagine your site has a Dark Mode feature. You want all User Profile Cards to look different when inside a dark-mode container.

<div class="dark-mode">
    <app-user-card>
        <img src="profile.jpg" alt="User Photo">
        <h3>Sarah Connor</h3>
        <p>Graphic Designer</p>
    </app-user-card>
</div>

:host-context(.dark-mode) {
    display: block;
    border: 2px solid gray;
    border-radius: 0.375em;
    background-color: #333;
    color: white;
}

✅ Now, if app-user-card is inside .dark-mode, it automatically changes to dark mode! 🌙

The Problem with :host-context()

While :host-context() is useful, it can cause tight coupling between components and global styles.

If you rename .dark-mode to .theme-dark, you must update every component using :host-context(.dark-mode).

A Better Alternative: Use CSS Variables Instead of :host-context()

Instead of :host-context(), we can use CSS variables that change based on a global class.

CSS variables are a powerful way to manage and centralize styling properties in CSS.

Here's how they work:

✅ Step 1: Define Global Theme Variables

CSS variables are defined with a -- prefix followed by a name and a value.

The :root pseudo-class is commonly used to define these variables globally, making them accessible throughout the application.

For example:

/* styles.css */
:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

✅ Step 2: Apply Variables in Components

To use a CSS variable, you use the var() function, passing the variable name as an argument.

For example:

:host {
  background-color: var(--bg-color);
  color: var(--text-color);
  display: block;
  border: 2px solid gray;
  border-radius: 0.375em;
}

Now, components will automatically adjust without relying on :host-context().

Want to explore more?

Check out my deep dive on Angular styling techniques on Gumroad for additional insights and best practices! → https://bytebantz.gumroad.com

Your Data, Your Privacy: How VPNs Hide Your Identity

bytebantz — Sat, 28 Dec 2024 10:25:05 +0000

What is a VPN?

A VPN (Virtual Private Network) is a service that encrypts your internet connection and routes it through a secure server, masking your real IP address. By doing so, it ensures that your online activities remain private and your data is secure, even on public networks.

Why Use a VPN?

1. Enhanced Privacy

Without a VPN, websites, ISPs (Internet Service Providers), and other entities can track your IP address, browsing habits, and location. A VPN hides this information, giving you greater anonymity.

2. Security on Public Wi-Fi

Public Wi-Fi networks are hotspots for cybercriminals. A VPN encrypts your connection, safeguarding your data from prying eyes.

3. Bypassing Geo-Restrictions

VPNs allow you to access content unavailable in your country by routing your connection through servers in different regions.

4. Preventing ISP Throttling

Some ISPs monitor your online activities and slow down your connection based on usage. A VPN encrypts your traffic, preventing ISPs from selectively throttling your speeds.

5. Online Banking

Some banks block access from foreign IP addresses to prevent fraud. A VPN allows you to appear as if you're accessing the internet from your home country by routing your connection through a VPN server in your home country.

To grasp how VPNs work, it's helpful to understand some fundamental networking concepts.

1. Network Interface Card (NIC):

The NIC is the hardware in your computer or device that enables network connectivity.

Wired NICs use Ethernet cables to connect directly to a network.
Wireless NICs connect to Wi-Fi networks without cables.

Without a NIC, your device cannot access the internet, making it a critical component for VPN functionality.

2. Network Address Translation (NAT):

NAT (Network Address Translation) is a method used by routers to map multiple private IP addresses to a single public IP address (or a few public IPs).

NAT allows multiple devices on a private network to share a single public IP address, effectively managing limited public IP resources.

Without NAT, every device would need its own public IP address. For example:

If a single household had 10 devices, it would need 10 public IPs.
Multiply that by millions of households worldwide, and the demand for public IPs would far exceed supply.

NAT solves this problem by letting networks use private IPs internally and translating them to one or a few public IPs for external communication. This significantly reduces the number of public IPs required globally.

Example

1. The Setup:

Imagine you have a home network with 3 devices:

Device A: Private IP 192.168.1.2
Device B: Private IP 192.168.1.3
Device C: Private IP 192.168.1.4 These private IPs are not unique and cannot be used on the internet. Instead, your Internet Service Provider (ISP) gives you one public IP: 203.0.113.1.

2. Device Wants to Access the Internet:

Suppose Device A wants to visit example.com (IP 93.184.216.34). It sends a request to the router with its private IP address:

Source IP (Private): 192.168.1.2
Destination IP (Public): 93.184.216.34.

3. The Router Translates:

The router receives the request and does two things:

Replaces the private IP (192.168.1.2) with the public IP (203.0.113.1).
Records the translation in a table:

Private IP  | Port    | Public IP       | Port
192.168.1.2 | 12345   | 203.0.113.1     | 54321

Here, 12345 is the source port assigned by Device A, and 54321 is a new port the router assigns.

4. The Request Goes to the Internet:

Now, the request sent to example.com looks like this:

Source IP (Public): 203.0.113.1
Source Port: 54321
Destination IP (Public): 93.184.216.34. This makes it seem like the request is coming from the public IP, not Device A.

5. Response Comes Back:

The website example.com sends a response back to your public IP:

Source IP: 93.184.216.34
Destination IP (Public): 203.0.113.1
Destination Port: 54321.

6. Router Translates Back:

The router checks its NAT table to match the public IP and port (203.0.113.1:54321) to the corresponding private IP and port (192.168.1.2:12345). It then forwards the response to Device A.
7. Device A Gets the Data:

Device A receives the response, and the process is complete!

VPNs add a layer of privacy to this setup by replacing your public IP with that of the VPN server, preventing websites and other entities from tracking your location and activities.

How a VPN works

Step 1: Establishing a Secure Tunnel

When you enable a VPN, it creates a secure and encrypted connection (a "tunnel") between your device and a VPN server located elsewhere.
Encryption ensures that any data traveling through this tunnel is scrambled and cannot be intercepted or read by unauthorized parties.

Step 2: Sending Your Data

All your internet traffic (like requests to visit websites) is routed through this secure tunnel to the VPN server instead of going directly to the internet.

Step 3: Decryption at the VPN Server

The VPN server receives your encrypted data.
It decrypts the data to understand your request (e.g., visiting a specific website).

Step 4: Hiding Your IP Address

The VPN server forwards your request to the website you're trying to access.
The website does not see your actual IP address (your location). Instead, it sees the IP address of the VPN server, effectively hiding your real location.

Step 5: Receiving the Website’s Response

The website processes your request and sends the response (e.g., loading a webpage) back to the VPN server.

Step 6: Encrypting the Data

The VPN server encrypts the website's response and sends it back through the secure tunnel to your device.

Step 7: Decrypting and Displaying Data

Your device receives the encrypted data from the VPN server.
It decrypts the data, making it readable, and displays the content you requested (e.g., the webpage).

However, some VPNs may slow down your internet connection due to the extra step of routing traffic through a remote server. It's important to choose a VPN that offers high-speed servers, especially if you plan on streaming or gaming.

Some free VPNs may track and sell user data to advertisers, defeating the purpose of using a VPN in the first place. Always use a reputable paid service with no-logs policy, but remember that expensive doesn't necessarily equate to higher quality.

Recommended Affiliate VPN Providers

Surfshark

Why Choose Surfshark?

No-logs policy: Surfshark's no-logs policy means that your online activities are never tracked or stored.
Servers: Surfshark has over 3,200 servers, and its 100% RAM-only servers erase your data if the server is seized
You can use one Surfshark account to secure every device you own that supports a VPN client.
Surfshark offers advanced privacy features, including rotating IP and Dynamic MultiHop.
Surfshark is considered to be competitively priced.

NordVPN

Why Choose NordVPN?

Large Server Network: Access to a vast number of servers in multiple countries, over 5,500 servers worldwide, allowing for fast connections and diverse location options.
Advanced Security Features: Utilizes industry-standard encryption protocols like AES-256 for maximum data protection.
Dark Web Monitor: Get instant alerts about leaked credentials
Threat Protection: Additional feature to block malware, trackers, and malicious websites.

Conclusion

VPNs are essential for maintaining online privacy and security in today’s digital world. This article covered how VPNs work, their benefits, and key networking concepts like NIC and NAT that facilitate secure and efficient connectivity. Whether you’re looking to safeguard your personal data, bypass geographical restrictions, or prevent ISP throttling, a VPN is a great tool. With reliable options like Surfshark

Angular Template Variables: A Comprehensive Breakdown

bytebantz — Sat, 14 Sep 2024 16:52:45 +0000

Template variables are a simple way to reference DOM elements or directives inside your template, allowing you to use their values or manipulate them elsewhere in your component.

In this article, we will break down the syntax, scope, and use cases of template variables, demonstrating how they can be used effectively.

1. Declaring a Template Variable

To declare a template variable in Angular, you use the # symbol, followed by a variable name. You can use this variable to reference DOM elements like inputs, buttons, or even Angular components.

Example:

<input #phone placeholder="Enter your phone number" />

In this case, the #phone variable refers to the element.

2. Using Template Variables

Once declared, you can use the template variable elsewhere in your template. For example, you can access the value of the input element and pass it to a function when a button is clicked.

Example:

<input #phone placeholder="Enter your phone number" />
<button (click)="callPhone(phone.value)">Call</button>

In the above example, the template variable phone refers to the element.

When you click the button, the value of the input (phone.value) is passed to the callPhone() function in your component.

How Angular Assigns Values to Template Variables

· DOM Element: If you declare a variable on an HTML tag like , the variable refers to that HTML element.

· Component: If you declare it on a component, it refers to the instance of that component, allowing you to access its public methods and properties..

Example:

You can also use template reference variables to interact with child components. For instance, if you have a video player component, you might want to control it (play, pause, etc.) from the parent template.

<!-- VideoPlayerComponent has methods like play() and pause() -->
<app-video-player #videoPlayer></app-video-player>
<button (click)="videoPlayer.play()">Play</button>
<button (click)="videoPlayer.pause()">Pause</button>

· Directive (like ngModel): If you declare a variable and specify a name, such as #form=”ngForm”, the variable refers to the directive instance.

Example:

<form #itemForm="ngForm" >
  <label for="name">Name</label>
  <input
    type="text"
    id="name"
    name="name"
    ngModel
    required
    minlength="3"
  />
  <div *ngIf="!itemForm.form.valid">
    Name is required and must be at least 3 characters long.
  </div>
</form>

Template Variable Scope

Template variables are scoped to the area where they are declared, similar to how variables in JavaScript or TypeScript are scoped..

If you declare a template variable inside an *ngIf or *ngFor, it will only be available in that scope.

Example:

<input #ref1 type="text" />
<span>{{ ref1.value }}</span>

This works because both the input and the span are in the same scope. But if you declare the input inside an *ngIf, it will be limited to that block.

<div *ngIf="true">
  <input #ref2 type="text" />
</div>
<span>{{ ref2?.value }}</span>
<!-- This won't work because ref2 is in a different scope -->

The span cannot access ref2 because the #ref2 variable is inside the **/*ngIf **block, which creates a separate scope.

Use Cases

Common use cases include:
· Accessing form fields for validation: Template variables can be used to easily reference form elements and check their validity.

· Interacting with child components: You can control child components directly from the parent template by referencing the component instance with a template variable.

· DOM manipulation: Template variables allow you to interact with DOM elements, such as retrieving their values or triggering focus.

· Managing dynamically rendered elements: When working with dynamically rendered elements (e.g., using *ngIf or *ngFor), template variables help manage their state.

Conclusion

Template variables in Angular are a simple but powerful feature that allows direct interaction with DOM elements, components, and directives from the template. By understanding their syntax, scope, and various use cases, you can enhance your Angular applications by reducing complexity in your component class while improving template interaction.

Mastering Angular 18 State Management using NgRx

bytebantz — Tue, 10 Sep 2024 07:38:24 +0000

State management in Angular ensures that data is consistently and efficiently shared across all parts of an application. Instead of each component managing its own data, a central store holds the state.

This centralization ensures that when data changes, all components automatically reflect the updated state, leading to consistent behavior and simpler code. It also makes the app easier to maintain and scale, as data flow is managed from a single source of truth.

In this article, we’ll explore how to implement state management in Angular using NgRx by building a simple shopping cart application. We’ll cover the core concepts of NgRx, such as the Store, Actions, Reducers, Selectors, and Effects, and demonstrate how these pieces fit together to manage the state of your application effectively.

State in Angular refers to the data your app needs to manage and display, like a shopping cart’s contents.

Why you need State Management

1. Consistency: It ensures that data is uniform across all components. When data changes in one place, the central store updates all relevant components automatically, preventing inconsistencies.

2. Simplified Data Flow: Instead of passing data between components manually, state management allows any component to access or update data directly from the central store, making the app’s data flow easier to manage and understand.

3. Easier Maintenance and Scalability: By centralizing data management, state management reduces code duplication and complexity. This makes the app easier to maintain, debug, and scale as it grows.

4. Performance Optimization: State management solutions often come with tools to optimize performance, such as selectively updating only the components that need to react to a change in state, rather than re-rendering the entire application.

How NgRx works

NgRx is a state management library for Angular that helps manage and maintain the state of your application in a predictable way.

1. Component

The component is where the user interacts with your app. It might be a button to add an item to the shopping cart.

Components and services are separated and don’t communicate with each other directly, instead services are used within effects thus creating an application structure different from a traditional Angular app.

2. Action

An action describes what happened and contains any necessary payload (data).

3. Reducer

Updates the state based on the action.

4. Store

The store is a centralized place that holds the entire state of your application.

5. Selector

Extracts data from the store for components.

6. Effects

Effects are where you handle logic that doesn’t belong in the reducer, like API calls.

7. Service

Services perform the actual business logic or API calls. Effects often use services to perform tasks like fetching data from a server.

When to Use NgRx

Use NgRx when your app’s complexity justifies it, but for straightforward apps, stick to simpler state management methods. Angular’s services, signals and @Input/@Output bindings between components are usually sufficient for managing state in less complex applications.

Example: Building an Add to Cart Feature with NgRx

1.Create a New Angular Project:

ng new shopping-cart

2. Install NGRX and Effects
To install NGRX and Effects, run the following command in your terminal:

ng add @ngrx/store@latest

ng add @ngrx/effects

3. Define the Product Model
Inside the src/app directory, create a file named product.model.ts

Define the Product interface to represent the structure of a product:

export interface Product {
    id: string;
    name: string;
    price: number;
    quantity: number;
}

4. Set Up State Management
Step 1: Create state Folder inside the src/app directory

Step 2: Define Cart Actions

Create cart.actions.ts in the state folder.

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import { Product } from '../product.model';

export const CartActions = createActionGroup({
  source: 'Cart',
  events: {
    'Add Product': props<{ product: Product }>(),
    'Remove Product': props<{ productId: string }>(),
    'Update Quantity': props<{ productId: string; quantity: number }>(),
    'Load Products': emptyProps,
  },
});

export const CartApiActions = createActionGroup({
  source: 'Cart API',
  events: {
    'Load Products Success': props<{ products: Product[] }>(),
    'Load Products Failure': props<{ error: string }>(),
  },
});

Step 3: Create Reducers

Create cart.reducer.ts in the state folder.

import { createReducer, on } from '@ngrx/store';
import { Product } from '../product.model';
import { CartActions, CartApiActions } from './cart.actions';

// Initial state for products and cart
export const initialProductsState: ReadonlyArray<Product> = [];
export const initialCartState: ReadonlyArray<Product> = [];

// Reducer for products (fetched from API)
export const productsReducer = createReducer(
  initialProductsState,
  on(CartApiActions.loadProductsSuccess, (_state, { products }) => products)
);

// Reducer for cart (initially empty)
export const cartReducer = createReducer(
  initialCartState,
  on(CartActions.addProduct, (state, { product }) => {
    const existingProduct = state.find(p => p.id === product.id);
    if (existingProduct) {
      return state.map(p =>
        p.id === product.id ? { ...p, quantity: p.quantity + product.quantity } : p
      );
    }
    return [...state, product];
  }),
  on(CartActions.removeProduct, (state, { productId }) =>
    state.filter(p => p.id !== productId)
  ),
  on(CartActions.updateQuantity, (state, { productId, quantity }) =>
    state.map(p =>
      p.id === productId ? { ...p, quantity } : p
    )
  )
);

Step 4: Create Selectors

In the state folder, create cart.selectors.ts

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { Product } from '../product.model';

export const selectProducts = createFeatureSelector<ReadonlyArray<Product>>('products');

export const selectCart = createFeatureSelector<ReadonlyArray<Product>>('cart');

export const selectCartTotal = createSelector(selectCart, (cart) =>
  cart.reduce((total, product) => total + product.price * product.quantity, 0)
);

Step 5: Create Effects

Create a new file cart.effects.ts in the state folder that listens for the Load Products action, uses the service to fetch products, and dispatches either a success or failure action.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { ProductService } from '../product.service';
import { CartActions, CartApiActions } from './cart.actions';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class CartEffects {
  loadProducts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(CartActions.loadProducts),
      mergeMap(() =>
        this.productService.getProducts().pipe(
          map(products => CartApiActions.loadProductsSuccess({ products })),
          catchError(error => of(CartApiActions.loadProductsFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private productService: ProductService
  ) {}
}

5. Connect the State Management to Your App
In a file called app.config.ts, set up configurations for providing the store and effects to the application.

import { ApplicationConfig } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideHttpClient } from '@angular/common/http';
import { cartReducer, productsReducer } from './state/cart.reducer';
import { provideEffects } from '@ngrx/effects';
import { CartEffects } from './state/cart.effects';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore({
      products: productsReducer, 
      cart: cartReducer 
    }),
    provideHttpClient(),
    provideEffects([CartEffects])
],
};

6. Create a Service to Fetch Products
In the src/app directory create product.service.ts to implement the service to fetch products

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Product } from './product.model';

@Injectable({ providedIn: 'root' })
export class ProductService {
  getProducts(): Observable<Array<Product>> {
    return of([
      { id: '1', name: 'Product 1', price: 10, quantity: 1 },
      { id: '2', name: 'Product 2', price: 20, quantity: 1 },
    ]);
  }
}

7. Create the Product List Component
Run the following command to generate the component: ng generate component product-list

This component displays the list of products and allows adding them to the cart.

Modify the product-list.component.ts file:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Product } from '../product.model';
import { selectProducts } from '../state/cart.selectors';
import { CartActions } from '../state/cart.actions';

@Component({
  selector: 'app-product-list',
  standalone: true,
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  imports: [CommonModule],
})
export class ProductListComponent implements OnInit {
  products$!: Observable<ReadonlyArray<Product>>;

  constructor(private store: Store) {

  }

  ngOnInit(): void {
    this.store.dispatch(CartActions.loadProducts()); // Dispatch load products action
    this.products$ = this.store.select(selectProducts); // Select products from the store
  }

  onAddToCart(product: Product) {
    this.store.dispatch(CartActions.addProduct({ product }));
  }
}

Modify the product-list.component.html file:

<div *ngIf="products$ | async as products">
  <div class="product-item" *ngFor="let product of products">
    <p>{{product.name}}</p>
    <span>{{product.price | currency}}</span>
    <button (click)="onAddToCart(product)" data-test="add-button">Add to Cart</button>
  </div>
</div>

8. Create the Shopping Cart Component
Run the following command to generate the component: ng generate component shopping-cart

This component displays the products in the cart and allows updating the quantity or removing items from the cart.

Modify the shopping-cart.component.ts file:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Product } from '../product.model';
import { selectCart, selectCartTotal } from '../state/cart.selectors';
import { CartActions } from '../state/cart.actions';

@Component({
  selector: 'app-shopping-cart',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css'],
})
export class ShoppingCartComponent implements OnInit {
  cart$: Observable<ReadonlyArray<Product>>;
  cartTotal$: Observable<number>;

  constructor(private store: Store) {
    this.cart$ = this.store.select(selectCart);
    this.cartTotal$ = this.store.select(selectCartTotal);
  }

  ngOnInit(): void {}

  onRemoveFromCart(productId: string) {
    this.store.dispatch(CartActions.removeProduct({ productId }));
  }

  onQuantityChange(event: Event, productId: string) {
    const inputElement = event.target as HTMLInputElement;
    let quantity = parseInt(inputElement.value, 10);

    this.store.dispatch(CartActions.updateQuantity({ productId, quantity }));
  }
}

Modify the shopping-cart.component.html file:

<div *ngIf="cart$ | async as cart">
  <div class="cart-item" *ngFor="let product of cart">
    <p>{{product.name}}</p><span>{{product.price | currency}}</span>
    <input type="number" [value]="product.quantity" (input)="onQuantityChange($event, product.id)" />
    <button (click)="onRemoveFromCart(product.id)" data-test="remove-button">Remove</button>
  </div>
  <div class="total">
    Total: {{cartTotal$ | async | currency}}
  </div>
</div>

Modify the shopping-cart.component.css file:

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cart-item p {
  margin: 0;
  font-size: 16px;
}

.cart-item input {
  width: 50px;
  text-align: center;
}

.total {
  font-weight: bold;
  margin-top: 20px;
}

9. Put Everything Together in the App Component
This component will display the product list and the shopping cart

Modify the app.component.ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  imports: [CommonModule, ProductListComponent, ShoppingCartComponent, NgIf],
})
export class AppComponent {}

Modify the app.component.html file:

<!-- app.component.html -->
<h2>Products</h2>
<app-product-list></app-product-list>

<h2>Shopping Cart</h2>
<app-shopping-cart></app-shopping-cart>

10. Running the Application
Finally, run your application using ng serve.

Now, you can add products to your cart, remove them, or update their quantities.

Conclusion

In this article, we built a simple shopping cart application to demonstrate the core concepts of NgRx, such as the Store, Actions, Reducers, Selectors, and Effects. This example serves as a foundation for understanding how NgRx works and how it can be applied to more complex applications.

As your Angular projects grow in complexity, leveraging NgRx for state management will help you maintain consistency across your application, reduce the likelihood of bugs, and make your codebase easier to maintain.

Angular Pipes: A Comprehensive guide

bytebantz — Mon, 09 Sep 2024 10:05:39 +0000

Pipes in Angular are simple functions used to transform data in templates without modifying the underlying data. Pipes take in a value, process it, and return a formatted or transformed output. They are often used for formatting dates, numbers, strings, and even arrays or objects.

They allow you to format and display data in a more readable or relevant format directly in the view without altering the underlying data model.

Using pipes helps in keeping the code clean and readable. Instead of writing complex logic in the templates or components, you can encapsulate that logic in a pipe, which can then be reused across different parts of your application.
For example, if you’re developing a blog platform where users can see the publication date of articles. Dates need to be displayed in a user-friendly format, such as “August 31, 2024,” instead of the raw format “2024–08–31T14:48:00.000Z”. With pipes, you can use Angular’s built-in DatePipe in the template instead of manually formatting the date in the component, cluttering the code and reducing readability.

<p>Published on: {{ article.publishDate | date:'longDate' }}</p>

To apply a pipe, use the pipe operator (|) within a template expression as shown in the above code example.

Built-in Pipes

Angular comes with several built-in pipes that cover common tasks (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, etc.). Knowing how to use these can make your code cleaner and more efficient.

Examples:

<pre>{{ user | json }}</pre>
<p>Price: {{ product.price | currency:'USD' }}</p>
<p>{{ user.name | uppercase }}</p>

Parametrized Pipes

Many Angular pipes accept parameters to customize their behavior.

To specify the parameter, follow the pipe name with a colon (:) and the parameter value

Some pipes accept multiple parameters, which are separated by additional colons.

Parameters can be optional or required. Suppose you have a custom pipe that formats currency and requires you to specify the currency type as a parameter. If this parameter is not provided, the pipe might not be able to format the value correctly.

<p>The product price is {{ price | customCurrency:'USD' }}</p>

1. DatePipe with Parameters

<p>Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}</p>

This formats the date as “August 31, 2024, 2:48:00 PM”.

2. CurrencyPipe with Parameters

<p>Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}</p>

This formats the price as “€1,235” (rounded to no decimal places).

Chaining Pipes

You can chain multiple pipes together to achieve complex transformations.

<p>{{ article.content | slice:0:100 | uppercase }}</p>

This will slice the first 100 characters of article.content and convert them to uppercase.

Custom Pipes

Sometimes, the built-in pipes may not meet your specific needs and you will need to create a custom pipe to handle the specific logic. Here’s how you can do it.

Example:

In the following example we are going to create a pipe that adds a greeting to a name like “Hello, Alice!”

Run the following command to generate a new pipe:

ng generate pipe greet

Now, let’s modify the greet.pipe.ts file in the src/app directory to include the pipe logic:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Once your pipe is ready, you can use it in your templates.

<p>{{ 'Alice' | greet }}</p>

Creating a Parameterized Custom Pipe

Now we are going to make the greeting customizable, so you can say “Hi, Alice!” or “Welcome, Alice!” depending on what you pass to the pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

The transform method now has a second parameter, greeting. If no greeting is provided, it defaults to “Hello”.

Now you can customize the greeting in your templates.

<p>{{ 'Alice' | greet:'Hi' }}</p>
<p>{{ 'Bob' | greet:'Welcome' }}</p>

Pure vs. Impure Pipes

1. Pure Pipes
By default, all Angular pipes are pure. A pure pipe only gets called when input data (like a number or a string) or when the reference to an object (like an array or date) changes. This makes pure pipes efficient and performant because the pipe doesn’t run unnecessarily.

However, if your data is more complex, like an array of items, Angular might not notice changes inside the array (like adding a new item) because the reference to the array hasn’t changed.

Unless necessary, keep your pipes pure to avoid unnecessary re-renders and to maintain performance.

Example:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In your template:

<ul>
  <li *ngFor="let item of (items | onSale)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

If you add a new item to the items array that’s on sale, you might expect it to show up in the list. But if you simply push the new item into the array, the list might not update because the array reference hasn’t changed.

2. Impure Pipes

An impure pipe, on the other hand, is called every time Angular performs a change detection cycle. However, because they run so often, they can slow down your app.

Example:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In your template:

<ul>
  <li *ngFor="let item of (items | onSaleImpure)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

Now, when you add a new item, the pipe will notice the change and update the list.

Best Practices for Using Pipes

Keep Pipes Simple. Avoid Heavy Computations in Pipes
Name Pipes Clearly and Descriptively
Keep Pipes Focused on a Single Responsibility
Avoid Impure Pipes When Possible
Test Custom Pipes Thoroughly

Conclusion

Angular pipes streamline data transformation tasks, making your code more modular, reusable, and maintainable. They help to enforce consistency across the application and improve the readability of your templates, which is crucial for developing scalable and maintainable applications.

Boosting Angular Speed with Better Change Detection

bytebantz — Mon, 15 Jul 2024 09:10:33 +0000

Angular Change detection is a feature that detects changes in the application’s data and updates the DOM accordingly, ensuring that the user interface remains up-to-date with the latest data. Imagine you have a to-do list app. When you add a new item, change detection ensures that the new item appears on the screen without you having to manually refresh the page.

Angular uses a library called Zone.js to help with change detection. Zone.js is a library that provides a mechanism for wrapping JavaScript code and executing it in a specific context or zone. In Angular, Zone.js is used to create a new zone for each component and to track changes within that component’s zone. A zone is basically an execution context for your code. When the application starts, Angular creates its own zone instance ngZone by extending the one provided by Zone.js.

By default, Angular uses a “check always” strategy, where it checks all components in the component tree for changes on every event cycle. This can be inefficient, especially for large applications with complex component trees.

Angular Change Detection runs automatically by default. However, there are times when you may want to manually trigger change detection. To manually trigger change detection in your application, you can use the detectChanges() method provided by the ChangeDetectorRef class which will run change detection on this view and its children. This method can be used within components or services

constructor(private cd:ChangeDetectorRef){}
    // Call this function when you want to manually trigger change detection 
    detectChanges(){
        this.cd.detectChanges();
 }

We can also trigger change detection manually by using:

- ApplicationRef.tick() which triggers change detection for every components in the component tree (basically whole application)

- markForCheck() on ChangeDetectorRef which marks all OnPush ancestors to be checked once, either on the current or next detection cycle. This method does not trigger the change detector directly.

Running specific code outside the Zone allows developers to manage change detection manually, which can be beneficial in complex applications where optimizing change detection cycles is critical.

Any code that we want to run outside of the Angular zone should be placed inside runOutsideAngular().

By placing code inside runOutsideAngular(), developers can ensure that certain operations do not trigger change detection, thus improving performance.

export class AppComponent {
    constructor(private zone: NgZone) { }

    handleClick() {
        this.zone.runOutsideAngular(() => {
            // Code to run outside of the Angular zone
        });
    }
}

Similarly any code that we want to run inside of the Angular zone should be placed inside run().

This simplifies development as developers don’t have to manually trigger change detection after every asynchronous operation.

export class AppComponent {
    constructor(private zone: NgZone) { }

    handleClick() {
        this.zone.run(() => {
            // Code to run inside the Angular zone
        });
    }
}

Angular comes with two component change detection strategies: default and onPush.

i. Default (check always)

In the default change detection strategy, Angular automatically triggers change detection whenever an event occurs or data changes.

The process works by traversing the component tree in the application. It starts from the root component and checks for changes in each component even if no changes occured.

If you have a large number of components or nested components in your Angular application, performance issues are more likely to occur.

ii. OnPush

The OnPush change detection strategy allows you to optimize performance by only triggering change detection when input properties of a component change or when an event has been fired from that component.

This strategy significantly reduces the number of checks Angular performs, leading to better performance, especially in large and complex applications.

Developers can specify this strategy at the component level, meaning that some components can use “OnPush” while others continue to use the default strategy.

We can change the detection strategy from default to ChangeDetectionStrategy.OnPush by adding changeDetection property on @Component decorator.

import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}

Since “OnPush” relies on reference changes to detect updates, mutating the properties of an object (e.g., adding or modifying elements in an array) won’t trigger change detection. Always create new instances of objects or arrays when updating them.

To treat a reference type as immutable, reassign the value all together.

In this example, calling updateName() will not trigger change detection in the ChildComponent because the reference to data remains the same.

export class ParentComponent {
    data = { name: 'John' };

    updateName() {
        this.data.name = 'Doe'; // Mutating the existing object
    }
}

Here, updateName() creates a new object, changing the reference, which triggers change detection in the ChildComponent.

export class ParentComponent {
    data = { name: 'John' };

    updateName() {
        this.data = { ...this.data, name: 'Doe' }; // Creating a new object
    }
}

To effectively use the “OnPush” change detection strategy in Angular, always ensure immutability

When to use OnPush

· You have a component that solely depends on immutable input parameters.

· You have a component which has heavy rendering (such as components that display charts, graphs etc.). In this case, you can use OnPush to save computation power by avoiding to render the component when it is not necessary

Conclusion

Angular’s change detection, powered by Zone.js, keeps the user interface in sync with data changes. While the default “check always” strategy ensures the UI is updated automatically, it can be inefficient for large applications. Developers can manually control change detection using methods like detectChanges() or markForCheck(). Running code outside Angular’s zone can optimize performance by reducing unnecessary change detections. Additionally, using the OnPush strategy helps improve performance by only checking for changes when necessary. By understanding and using these strategies, developers can build efficient and responsive Angular applications.