Advanced Component Patterns in Angular

Advanced component patterns in Angular help you create more reusable, maintainable, and scalable components. This tutorial covers some of the advanced patterns and how to implement them effectively in your Angular applications.

Container and Presentational Components

Container components focus on how things work, while presentational components focus on how things look. This pattern helps in separating concerns:

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

@Component({
  selector: 'app-container',
  template: '<app-presentational [data]="data"></app-presentational>',
})
export class ContainerComponent {
  data = 'Hello from Container';
}

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

@Component({
  selector: 'app-presentational',
  template: '<div>{{ data }}</div>',
})
export class PresentationalComponent {
  @Input() data: string;
}

Smart and Dumb Components

Smart components are aware of the application's state and logic, while dumb components are stateless and purely presentational:

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

@Component({
  selector: 'app-smart',
  template: '<app-dumb [value]="value" (change)="onChange($event)"></app-dumb>',
})
export class SmartComponent {
  value = 'Initial Value';

  onChange(newValue: string) {
    this.value = newValue;
  }
}

// Dumb component
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dumb',
  template: '<input [value]="value" (input)="change($event)">',
})
export class DumbComponent {
  @Input() value: string;
  @Output() change = new EventEmitter<string>();

  change(event: Event) {
    this.change.emit((event.target as HTMLInputElement).value);
  }
}

High-Order Components

High-order components (HOCs) are components that take other components as input and return a new component. They are useful for code reuse:

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

export function WithLogging(WrappedComponent: any) {
  return class extends WrappedComponent {
    ngOnInit() {
      console.log('Component initialized with data:', this.data);
      super.ngOnInit();
    }
  };
}

@Component({
  selector: 'app-base',
  template: '<div>Base component</div>',
})
export class BaseComponent {
  @Input() data: string;
}

@Component({
  selector: 'app-enhanced',
  template: '<div>Enhanced component</div>',
})
export class EnhancedComponent extends WithLogging(BaseComponent) {}

Component Inheritance

Component inheritance allows you to extend existing components to create new ones, promoting code reuse:

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

@Component({
  selector: 'app-base',
  template: '<div>Base component</div>',
})
export class BaseComponent {
  logMessage() {
    console.log('Base component message');
  }
}

@Component({
  selector: 'app-derived',
  template: '<div>Derived component</div>',
})
export class DerivedComponent extends BaseComponent {
  logDerivedMessage() {
    console.log('Derived component message');
  }
}

Key Points

Conclusion

Understanding and implementing advanced component patterns in Angular can significantly improve the maintainability, reusability, and scalability of your applications. By using these patterns effectively, you can create more robust and efficient Angular applications. Happy coding!