1

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?

Rabbi Shuki Gur
  • 1,656
  • 19
  • 36

1 Answers1

2

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;
    }
}
evilkos
  • 545
  • 10
  • 17
  • You approach is nice, but the app will grow up so I will have more than 4 components and then this will be hard to modify –  Jul 03 '17 at 09:43
  • @JohnSmith I see your point. Maybe you'll find this answer helpful: http://stackoverflow.com/a/36325468/504075 – evilkos Jul 03 '17 at 09:58