Angular 17 | Standalone components-Real world example

In Angular 17, standalone components, directives, and pipes can be defined and used independently of NgModules. This means you can directly import and use them in your Angular applications without wrapping them inside an NgModule.

Key Benefits

• Simplified Component Structure: Reduces the need for NgModules, making the component structure simpler and more intuitive.
• Enhanced Reusability: Facilitates the creation of reusable components that can be easily shared across different projects.
• Improved Performance: Reduces the overhead associated with NgModules, potentially improving the application’s performance.

Creating Standalone Components

Let’s create a standalone component as an example.

Step 1: Define a Standalone Component

Create a new file called standalone.component.ts:

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

@Component({
  selector: 'app-standalone',
  template: `<h1>Hello, Standalone Component!</h1>`,
  standalone: true
})
export class StandaloneComponent {}

Step 2: Use the Standalone Component

You can directly use the standalone component in your application without declaring it in an NgModule.

import { bootstrapApplication } from '@angular/platform-browser';
import { StandaloneComponent } from './standalone.component';

bootstrapApplication(StandaloneComponent);

Real-World Example: Standalone Feature in a Dashboard Application

Imagine a dashboard application where you want to create a standalone widget component that can be reused across different parts of the application.

Step 1: Create a Standalone Widget Component

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

@Component({
  selector: 'app-widget',
  template: `
    <div class="widget">
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
    </div>
  `,
  styles: [`
    .widget {
      border: 1px solid #ccc;
      padding: 1rem;
      margin: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
  `],
  standalone: true
})
export class WidgetComponent {
  @Input() title: string = 'Default Title';
  @Input() content: string = 'Default Content';
}

Step 2: Use the Standalone Widget Component in the Dashboard

import { Component } from '@angular/core';
import { WidgetComponent } from './widget.component';

@Component({
  selector: 'app-dashboard',
  template: `
    <app-widget title="Sales" content="Sales data here"></app-widget>
    <app-widget title="Revenue" content="Revenue data here"></app-widget>
    <app-widget title="Users" content="User data here"></app-widget>
  `,
  standalone: true,
  imports: [WidgetComponent]
})
export class DashboardComponent {}

Step 3: Bootstrap the Dashboard Component

import { bootstrapApplication } from '@angular/platform-browser';
import { DashboardComponent } from './dashboard.component';

bootstrapApplication(DashboardComponent);

Using Standalone Directives and Pipes

Angular 17 also allows creating standalone directives and pipes. Here’s how you can define and use them.

Standalone Directive Example

Create a standalone directive in highlight.directive.ts:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Using the Standalone Directive

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-root',
  template: `<p appHighlight>Hover over this text to see the highlight effect.</p>`,
  standalone: true,
  imports: [HighlightDirective]
})
export class AppComponent {}

Standalone Pipe Example

Create a standalone pipe in exclamation.pipe.ts:

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

@Pipe({
  name: 'exclamation',
  standalone: true
})
export class ExclamationPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

Using the Standalone Pipe

import { Component } from '@angular/core';
import { ExclamationPipe } from './exclamation.pipe';

@Component({
  selector: 'app-root',
  template: `<p>{{ 'Hello, World' | exclamation }}</p>`,
  standalone: true,
  imports: [ExclamationPipe]
})
export class AppComponent {}

Conclusion

Angular 17’s standalone feature significantly simplifies the development process by reducing the reliance on NgModules. This makes components, directives, and pipes easier to develop, test, and reuse across different parts of an application or even across different projects.

By adopting standalone components, you can enhance the modularity of your Angular applications, making them more maintainable and scalable. This feature is a step forward in modernizing Angular development, aligning it with the simplicity and flexibility seen in other contemporary web frameworks.