Toggle textboxes using angular

Question

Have to show one textbox only at a time, if click on toggle need to hide first textbox and need to show second textbox. If I click again need to show first textbox and hide second textbox. Tried below, but unable to display one textbox onload itself...

HTML:

 <div><input *ngIf="text1"
  id="test1"
  type="text"
  placeholder="Textbox1"
/>
</div>
<div>
<input *ngIf="text2"
  id="test2"
  type="text"
  placeholder="Textbox2"
/>
</div>

<button (click)="toggle()">Toggle</button>

.ts

 toggle() {
    this.text1 = !this.text1;
    if (this.text1) {
      this.text2 = false;
      this.text1 = true;
    } else {
      this.text2 = true;
      this.text1 = false;
    }
  }

Demo

Owen Kelvin · Accepted Answer · 2021-03-23 09:43:32Z

2

You can use 1booleanItem

toggle() {
    this.text1 = !this.text1;
}

<div><input *ngIf="text1"
  id="test1"
  type="text"
  placeholder="Textbox1"
/>
</div>
<div>
  <input *ngIf="!text1"
  id="test2"
  type="text"
  placeholder="Textbox2"
/>
</div>

<button (click)="toggle()">Toggle</button>

Demo

answered Mar 23, 2021 at 9:43

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Reddy · Accepted Answer · 2021-03-23 09:44:48Z

1

Tried below, but unable to display one textbox onload itself

you can set the boolean of one of the text boxes to true:

public text1: boolean = true;

Using a single variable to track the visibility:

export class NgbdTypeaheadTemplate {
  public showText1: boolean = true;

  toggle() {
    this.showText1 = !this.showText1;
  }
}

and

<div><input *ngIf="showText1"
  id="test1"
  type="text"
  placeholder="Textbox1"
/>
</div>
<div>
  <input *ngIf="!showText1"
  id="test2"
  type="text"
  placeholder="Textbox2"
/>
</div>

edited Mar 23, 2021 at 9:44

answered Mar 23, 2021 at 9:39

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

2 Comments

Rajasekhar Over a year ago

yeah...I just realized it, thanks a lot :)

Ramesh Reddy Over a year ago

@Rajasekhar You can also refactor, see the updated answer.

Collectives™ on Stack Overflow

Toggle textboxes using angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related