Angular中的上一个和下一个按钮

Question

I want to go from page 1 to page 4, in Angular 4, with a prev and next button. Each page, from 1 to 4, is a individual component.

My buttons component is on the bottom on each page.

<div class="d-flex flex-row">
 <div class="trade-75"><button type="button" class="btn trade-back">

 </button></div>
 <div class="trade-10"><button type="button" class="btn trade-next">

 </button></div>
</div>

I was thinking to put in an array all components and to loop thought this array, but I don't know how to do this in Angular 4 :). Is there anyone who can help me?

Answer 1

I would probably do something simple like this

<div class="page">
    <my-first-page *ngIf="currentPage == 0"></my-first-page>
    <my-second-page *ngIf="currentPage == 1"></my-second-page>
    <my-third-page *ngIf="currentPage == 2"></my-third-page>
    <my-fourth-page *ngIf="currentPage == 3"></my-fourth-page>
</div>
<div class="d-flex flex-row">
    <div class="trade-75">
        <button type="button" class="btn trade-back" (click)="changePage(-1)"></button>
    </div>
     <div class="trade-10">
        <button type="button" class="btn trade-next" (click)="changePage(1)"></button>
    </div>
</div>

and in a component

export class WizardComponent {
    public currentPage = 0;
    public changePage(delta: number): void {
        // some checks
        currentPage += delta;
    }
}