How to hide an element when a radio button is checked using Angular 2+?

Question

I'm currently trying to use click and ngIf*to do this, but the change only happens if I double click. Also, if I double click the currently selected option, the view will change and I don't want that to happen. How can I do this properly?

      <fieldset class="form-group col-md-3">
    <div class="form-check">
      <label class="form-check-label">
        <input (click)="computation = !computation" type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Enable View
      </label>
    </div>
    <div class="form-check">
    <label class="form-check-label">
        <input (click)="computation = !computation" type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
          Disable View
      </label>
    </div>
  </fieldset>
  <div *ngIf="computation" class="form-group col-md-3">
    <label for="app_id_org_input">Enabled</label>
    <input type="text" class="form-control" id="app_id_org_input" placeholder="Enabled">
  </div>
  <div *ngIf="!computation" class="form-group col-md-3">
    <label for="app_id_input">Disabled</label>
    <input type="text" class="form-control" id="app_id_input" placeholder="Disabled">
  </div>

Ryan Siu · Accepted Answer · 2017-09-27 00:49:55Z

1

I have another approach for you to achieve this. You can make use of the ngModel to let the Angular2 change the variable value. Here is the code that works for me. In your class,

// set your variable
private computation = true;

In your template,

  <fieldset class="form-group col-md-3">
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" [value]="true" checked [(ngModel)]="computation">
          Enable View
      </label>
    </div>
    <div class="form-check">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" [value]="false" [(ngModel)]="computation">
          Disable View
      </label>
    </div>
  </fieldset>
  <div *ngIf="computation" class="form-group col-md-3">
    <label for="app_id_org_input">Enabled</label>
    <input type="text" class="form-control" id="app_id_org_input" placeholder="Enabled">
  </div>
  <div *ngIf="!computation" class="form-group col-md-3">
    <label for="app_id_input">Disabled</label>
    <input type="text" class="form-control" id="app_id_input" placeholder="Disabled">
  </div>

answered Sep 27, 2017 at 0:49

Ryan Siu

1,0526 silver badges12 bronze badges

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

2 Comments

user3235483 Over a year ago

I'm not sure where should I declare the variable computation. Does this error have to do with that? Can't bind to 'ngModel' since it isn't a known property of 'input'.

Ryan Siu Over a year ago

You should import the FormsModule into your module first. Then, declare computation in your component class. I think you have already declared, or the original one will not work.

Collectives™ on Stack Overflow

How to hide an element when a radio button is checked using Angular 2+?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related