CODEWITHSUNDEEP
angular
Tech Learner
Tech Learner

Reputation: 11

facing issue while displaying various views in same page using angular 2+

here i am trying to display the 3 different views in the same page buy button press but here i unable to proceed for that if press 2nd view and i am getting the 3rd view also

below is my code:

<div class="container">


    <div *ngIf="showData">
         <p>This is page 1</p>
        <button class="btn btn-primary" (click)="testOne()">Page 1
         </button>
           <br>
           <br>
         <button (click)="page3()" >click here for page 3</button>
    </div>
    <hr/>
    <div *ngIf="!showData">
        <p> this is page 2</p>
        <button class="btn btn-primary" (click)="back()">Back to page1</button>
    </div>

    <div *ngIf="!showData">
       <p>Page 3</p>
    </div>  

</div>  

 showData = true;


  testOne(){
    this.showData = false;
  }

  back(){
    this.showData = true;
  }

  page3(){
    this.showData = false;
  }

stackblitz url : https://stackblitz.com/edit/angular-vyw1cs

Upvotes: 0

Views: 28

Answers (2)

dev-assassin
dev-assassin

Reputation: 271

you have to do like below:

link is here: https://stackblitz.com/edit/angular-wphb4k

Upvotes: 1

Z. Bagley
Z. Bagley

Reputation: 9260

One method is to set your *ngIf to evaluate if it's on a page number, then act accordingly:

html

<div class="container">
    <div *ngIf="showData == 1">
         <p>This is page 1</p>
        <button class="btn btn-primary" (click)="showData = 2">Page 2
         </button>
         <button (click)="showData = 3" >page 3</button>
    </div>
    <hr/>
    <div *ngIf="showData == 2">
        <p> this is page 2</p>
        <button class="btn btn-primary" (click)="showData = 1">Page 1
         </button>
         <button (click)="showData = 3" >page 3</button>
    </div>

    <div *ngIf="showData == 3">
       <p>Page 3</p>
        <button class="btn btn-primary" (click)="showData = 1">Page 1
         </button>
         <button (click)="showData = 2" >page 2</button>
    </div>  

</div>

component.ts

showData = 1

stackblitz example

https://stackblitz.com/edit/angular-9scudq

Upvotes: 0

Related Questions