Angular Global Components

This skill demonstrates how to build reusable UI components (dumb/smart) that live in src/components/. We use the Alert component as the canonical example of a global overlay managed by a service.

1. Interface (src/interfaces/alert.interface.ts)

Define strong types for the component state.

export type AlertType = "success" | "error" | "warning" | "info" | "delete";

export interface AlertButton {
  text: string;
  style: "primary" | "secondary" | "danger" | "success";
  action: () => void;
}