Angular Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {StepsModule} from 'primeng/steps';
import {MenuItem} from 'primeng/api';
</code></pre>
<h3 id="menumodel-api">MenuModel API</h3>
Steps uses the common menumodel api to define its items, visit <a target="_blank" href="https://primefaces.org/primeng/showcase/#/menumodel">MenuModel API</a> for details.
<h3 id="getting-started">Getting Started</h3>
Steps requires a collection of menuitems as its model.
<pre><code class="lang-html">&lt;p-steps [model]="items"&gt;&lt;/p-steps&gt;
</code></pre>
<pre><code class="lang-js">export class MenuDemo {

 items: MenuItem[];

 ngOnInit() {
 this.items = [
 {label: 'Step 1'},
 {label: 'Step 2'},
 {label: 'Step 3'}
 ];
 }
}
</code></pre>
<h3 id="readonly">Readonly</h3>
Items are readonly by default, if you'd like to make them interactive then disable readonly.
<pre><code class="lang-html">&lt;p-steps [model]="items" [readonly]="false"&gt;&lt;/p-steps&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Steps supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/steps">Steps</a> showcase for demos and documentation.

Angular Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {StepsModule} from 'primeng/steps';
import {MenuItem} from 'primeng/api';
```

### MenuModel API

Steps uses the common menumodel api to define its items, visit [MenuModel API](https://primefaces.org/primeng/showcase/#/menumodel) for details.

### Getting Started

Steps requires a collection of menuitems as its model.

```html
<p-steps [model]="items"></p-steps>
```

```js
export class MenuDemo {

 items: MenuItem[];

 ngOnInit() {
 this.items = [
 {label: 'Step 1'},
 {label: 'Step 2'},
 {label: 'Step 3'}
 ];
 }
}
```

### Readonly

Items are readonly by default, if you'd like to make them interactive then disable **readonly**.

```html
<p-steps [model]="items" [readonly]="false"></p-steps>
```

### Theming

Steps supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Steps](https://primefaces.org/primeng/showcase/#/steps) showcase for demos and documentation.