Steps

import { MagarySteps, StepsItem } from 'ng-magary';

<magary-steps
  [model]="steps"
  [activeIndex]="currentStep"
  [readonly]="false"
  (activeIndexChange)="navigateToStep($event)">
</magary-steps>

<magary-steps
  [model]="steps"
  [activeIndex]="activeStep"
  [orientation]="'vertical'">
</magary-steps>

steps: StepsItem[] = [
  { 
    label: 'Account',
    routerLink: '/setup/account',
    icon: 'user'
  },
  { 
    label: 'Profile',
    routerLink: '/setup/profile',
    icon: 'id-card'
  },
  { 
    label: 'Complete',
    routerLink: '/setup/complete',
    icon: 'check'
  }
];

steps: StepsItem[] = [
  {
    label: 'Step 1',
    command: (event) => {
      console.log('Step 1 clicked', event);
      this.validateStep1();
    }
  },
  {
    label: 'Step 2',
    command: (event) => {
      this.validateStep2();
    }
  }
];

interface StepsItem {
  label: string;
  icon?: string;
  command?: (event?: any) => void;
  url?: string;
  routerLink?: string | any[];
  queryParams?: Record<string, unknown>;
  disabled?: boolean;
  target?: string;
  routerLinkActiveOptions?: IsActiveMatchOptions;
  style?: Record<string, any>;
  styleClass?: string;
}