export let Code = {
type: `@Component({
    selector: 'p-steps',
    template:
        <p-growl [value]="msgs"></p-growl>
	<h3 class="first">Basic</h3>
	<p-steps [model]="items"></p-steps>
	<h3>Clickable</h3>
	<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
	<h3>Custom Style</h3>
	<p-steps [model]="items" styleClass="steps-custom"></p-steps>
})
export class Steps {

	items: MenuItem[];
    
    msgs: Message[] = [];
    
    activeIndex: number = 1;

    ngOnInit() {
        this.items = [{
                label: 'Personal',
                command: (event: any) => {
                    this.activeIndex = 0;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'First Step', detail: event.item.label});
                }
            },
            {
                label: 'Seat',
                command: (event: any) => {
                    this.activeIndex = 1;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Seat Selection', detail: event.item.label});
                }
            },
            {
                label: 'Payment',
                command: (event: any) => {
                    this.activeIndex = 2;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Pay with CC', detail: event.item.label});
                }
            },
            {
                label: 'Confirmation',
                command: (event: any) => {
                    this.activeIndex = 3;
                    this.msgs.length = 0;
                    this.msgs.push({severity:'info', summary:'Last Step', detail: event.item.label});
                }
            }
        ];
    }
}
`
};