Angular 2+ show hide input with Boolean variable

Question

My code is working but I would know is there another solution to show and hide input without using many Boolean variables and many functions?

My code type script:
I have three inputs and I need to show the second input when the first input value is not empty:

 import { Component, OnInit } from '@angular/core'
    
    @Component({
      selector: 'app-takwa',
      templateUrl: './takwa.component.html',
      styleUrls: ['./takwa.component.css']
    })
    export class TakwaComponent implements OnInit {
    
    
    show1=false
      show2=false
      show3=false
    
      constructor() { }
    
      ngOnInit() {
        this.show1=true
    
      }
    
      showSecondInput(){
        this.show1=false
        this.show3=false
        this.show2=true
    
      }
    
      showThirdInput(){
        this.show1=false
        this.show3=true
        this.show2=false
    
      }
      showFirstInput(){
        this.show1=true
        this.show3=false
        this.show2=false
      }
    }

My HTML code :

<form action="">

<div *ngIf="show1">
  <input   formControlName="test1" value="test1">
  <button (click)="showSecondInput()">suivant</button>
</div>


<div *ngIf="show2">
  <input   formControlName="test2" value="Test2">
  <button (click)="showThirdInput()">suivant</button>
  <button (click)="showFirstInput()">retour</button>
</div>
<div>
  <div *ngIf="show3">
    <input   formControlName="test3" value="Test3">
    <button (click)=" showSecondInput()">retour</button>
  </div>


</div>
</form>

demo images

How about a single value like active = “show1” (etc etc). A single function like setActive(which: string).. and the tests like *ngIf = “active === ‘show1” — MikeOne, Nov 07 '21 at 22:26

score 0 · Accepted Answer · answered Nov 08 '21 at 12:48

As already mentioned in the comments, I would also use a single value for capturing the state. For type safety, I would recommend using an enum.

Based on your code, this would look something like this for the Component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  private currentStep: Steps;

  /*
   * The enum values cannot be used directly in the template. They have to declared in the Component again.
   * see: https://marco.dev/enums-angular and https://stackoverflow.com/questions/35923744/pass-enums-in-angular2-view-templates
   */
  readonly Steps = Steps;

  ngOnInit() {
    this.currentStep = Steps.STEP_1;
  }

  setActive(nextStep: Steps): void {
    this.currentStep = nextStep;
  }

  isActive(step: Steps): boolean {
    return this.currentStep === step;
  }
}

enum Steps {
  STEP_1 = 'step 1',
  STEP_2 = 'step 2',
  STEP_3 = 'step 3',
}

and for the template:

<div *ngIf="isActive(Steps.STEP_1)">
  <input formControlName="test1" value="test1" />
  <button (click)="setActive(Steps.STEP_2)">suivant</button>
</div>
<div *ngIf="isActive(Steps.STEP_2)">
  <input formControlName="test2" value="Test2" />
  <button (click)="setActive(Steps.STEP_3)">suivant</button>
  <button (click)="setActive(Steps.STEP_1)">retour</button>
</div>
<div>
  <div *ngIf="isActive(Steps.STEP_3)">
    <input formControlName="test3" value="Test3" />
    <button (click)="setActive(Steps.STEP_2)">retour</button>
  </div>
</div>

Angular 2+ show hide input with Boolean variable

1 Answers1