ngIf show or hide in angular 4

Question

I have function in component.ts like below

    visability=true;
    showTextBox(){
      debugger;
      this.visability = false;

    }

and in component.html below code I have

       <div class="col-sm">
          <div class="toggle">
            <input type="checkbox"  class="check">
            <!-- (click)="show=!show" -->
            <b class="b switch" ></b>
            <b class="b track"></b>
          </div>
          <h4 id="door-delivery">Door Delivery</h4>
        </div>
        <div class="col-sm address">
          <div *ngIf="!visability" (click)="showTextBox()">
            <input class="form-control " type="text" placeholder="Enter Address">
          </div>
          <div *ngIf="visability" (click)="showTextBox()">
            <select formControlName="pickup_location" class="form-control selectpicker" id="select-city" data-live-search="true" required>
              <option data-tokens="" disabled>
                <h2>Pickup location...</h2>
              </option>
              <option data-tokens="India">
                <h2>India</h2>
              </option>
              <option data-tokens="UAE">
                <h2>UAE</h2>
              </option>
              <option data-tokens="Japan">
                <h2>Japan</h2>
              </option>
            </select>
          </div>
        </div>

My Toggle Looks like My Question is when I click on toggle it should appear Enter pickup location and as well as again if I click on toggle it should be display the list of cities.

How we can achieve this? could any one help me

In your function instead of setting visibitlity to false you can just set it to the opposite of what it currently is with ! operator. visibility = !visibility — Jason White
– Jason White, Commented Aug 22, 2018 at 10:23

Anshuman Jaiswal · Accepted Answer · 2018-08-22 10:23:01Z

1

add click on your div holding toggle button as:

<div class="toggle" (click)=toggleTextBox()>
    <input type="checkbox"  class="check">
    <b class="b switch" ></b>
    <b class="b track"></b>
</div>

TS

visability=true;
toggleTextBox(){
  this.visability = !this.visability;
}

no need of (click)="showTextBox()" in div under <div class="col-sm address">.

answered Aug 22, 2018 at 10:23

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

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

Comments

Augustin R · Accepted Answer · 2018-08-22 10:19:24Z

0

You can use directly in your template :

(click)="visability = !visability"

answered Aug 22, 2018 at 10:19

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

1 Comment

Augustin R Over a year ago

It is important to respect the space before and after the =. Can you try to move it on the parent <div>?

Collectives™ on Stack Overflow

ngIf show or hide in angular 4

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related