What are some techniques for creating reusable and composable UI components with complex behavior in Angular? — Angular Interview Question #83

Creating reusable and composable UI components with complex behavior in Angular can be achieved through various techniques. Here, I’ll share with you some of these techniques:

1. **Component composition**: Design components to be composable, allowing you to combine multiple lower-level components to create complex UI behavior. This technique follows the "Divide and Conquer" principle, where you divide the complex UI into smaller, more manageable, and reusable sub-components.

Example: Let’s say you have a ‘UserCard‘ component that displays user information, and you want to create two variations — a simple one for displaying basic info and a detailed one for displaying extended info.

Here, you can create smaller components like ‘Avatar‘, ‘BasicInfo‘, and ‘ExtendedInfo‘ that can be combined to create the two variations of ‘UserCard‘:

<!-- Simple User Card -->
<app-user-card>
  <app-avatar></app-avatar>
  <app-basic-info></app-basic-info>
</app-user-card>

<!-- Detailed User Card -->
<app-user-card>
  <app-avatar></app-avatar>
  <app-basic-info></app-basic-info>
  <app-extended-info></app-extended-info>
</app-user-card>

2. **Content projection (ng-content)**: Content projection allows you to create components that accept dynamic content as input. This technique is useful for creating reusable UI components, as you can pass different content depending on the required composition.

Example: In the previous ‘UserCard‘ example, you can use content projection to create a more flexible component:

<!-- app-user-card.component.html -->
<div class="user-card">
  <ng-content></ng-content>
</div>

Now, you can insert any combination of sub-components within ‘<app-user-card>‘:

<app-user-card>
  <app-avatar></app-avatar>
  <app-basic-info></app-basic-info>
  <app-extended-info *ngIf="showExtendedInfo"></app-extended-info>
</app-user-card>

3. **Component inheritance**: In some cases, creating a base component class and extending it for specific scenarios might be suitable for complex behavior. This technique allows you to reuse common behavior between components.

Example: If you have a base chart component with common charting functionality, you can extend it to create specific chart types.

// base-chart.component.ts
export class BaseChartComponent {
  /* Common chart functionality */
}

// bar-chart.component.ts
@Component({ ... })
export class BarChartComponent extends BaseChartComponent {
  /* Bar chart specific functionality */
}

// line-chart.component.ts
@Component({ ... })
export class LineChartComponent extends BaseChartComponent {
  /* Line chart specific functionality */
}

4. **Directives**: Directives can be used to extend the functionality or behavior of an existing element or component. This makes them reusable for various UI components, especially when it comes to complex behavior.

Example: Imagine you want to create a tooltip directive that can be applied to any element or component:

// tooltip.directive.ts
@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  /* Tooltip functionality */
}

You can now use this directive on any element or component just by adding the ‘appTooltip‘ attribute:

<button appTooltip="Click me!">My Button</button>
<app-user-card appTooltip="User information"></app-user-card>

5. **Services**: Services in Angular help to share common functionalities and maintain a global state. In complex UI components, services can be used to encapsulate the component’s behavior and make it reusable.

Example: If you have a video player component that needs access to video streaming APIs or global media state, you can use a shared service:

// media.service.ts
@Injectable({ providedIn: 'root' })
export class MediaService {
  /* Video streaming API and global state */
}

// video-player.component.ts
@Component({ ... })
export class VideoPlayerComponent {
  constructor(private mediaService: MediaService) {}
  /* Use mediaService for the video player functionality */
}

By following these techniques, you can create reusable and composable UI components with complex behavior in Angular, making your application more maintainable and scalable.