Componente

Stepper

Wizard paso a paso con navegación libre o lineal, estado de completado y métodos imperativos next() / prev().

import { NeuStepperComponent } from '@neural-ui/core/stepper';

Checkout - paso 1 de 4

🛒 Tienes 3 artículos en el carrito por un total de 127,90 €.

Con pasos completados

import { NeuStepperComponent, NeuStepperStep, viewChild } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  imports: [NeuStepperComponent],
  template: `
    <neu-stepper #stepper
      [steps]="steps"
      [activeStep]="step()"
      (stepChange)="step.set($event)"
    />
    <button (click)="stepper.next()">Siguiente</button>
    <button (click)="stepper.prev()">Anterior</button>
  `
})
export class MyComponent {
  step = signal(0);
  stepper = viewChild(NeuStepperComponent);

  steps: NeuStepperStep[] = [
    { label: 'Datos personales' },
    { label: 'Método de pago'  },
    { label: 'Confirmar'       },
  ];
}