CODEWITHSUNDEEP
angularshow-hideangular-ng-if
Sternisic
Sternisic

Reputation: 319

How to hide and show content using *ngIf

I have some problems with *ngIf in Angular. How do I hide my content again?

In my example at Stackblitz, I'd like to hide my content again after the two radio buttons are not active.

When I click "2" and "at home", my output shows. But I want it to disappear again if, for example, I say "in the gym".

https://stackblitz.com/edit/angular-hcmstg

Here I give the ngModel

<label class="radio-inline"><input [(ngModel)]="split2" type="radio" name="radio1" value="two">2</label>
<label class="radio-inline"><input [(ngModel)]="split3" type="radio" name="radio1" value="three">3</label>
<label class="radio-inline"><input [(ngModel)]="split4" type="radio" name="radio1" value="four">4</label>



<label class="radio-inline"><input [(ngModel)]="home1" type="radio" name="radio2" value="home">at home</label>
<label class="radio-inline"><input [(ngModel)]="gym1" type="radio" name="radio2" value="gym">in the gym</label>

and here I work with * ngIf

<tr>
    <th scope="row">1</th>
    <td *ngIf="split2 && home1">{{home[0][0][1]}}</td>
    <td *ngIf="split2 && home1">{{home[0][0][0]}}</td>
    <td *ngIf="split2 && home1">{{home[0][1][0]}}</td>
</tr>

but they won't hide If I click on another radio button. The output stays forever

Upvotes: 1

Views: 3374

Answers (3)

Adarsh Sharma
Adarsh Sharma

Reputation: 576

you applied it in quit different way, there is no way in your codes to make split1 and home1 variable true,

I just did changes in your app.componenet.html

https://stackblitz.com/edit/angular-smttco

below is your corrected codes are

  <div class="container d-sm-flex list-group-item bs-popover-top btn-group-vertical">
        <h4 class="card-img-top btn-group-vertical">How often you want to go train?</h4>
        <div class="card-img-top">
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="two">2</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="three">3</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="four">4</label>
        </div>
    </div>

    <div class="container d-sm-flex list-group-item bs-popover-top btn-group-vertical">
        <h4 class="card-img-top btn-group-vertical">I want to train</h4>
        <div class="card-img-top">
            <label class="radio-inline card-img-top"><input [(ngModel)]="home" ng-model="example2" type="radio" name="radio2" value="home">at home</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="home" type="radio" name="radio2" value="gym">in the gym</label>
        </div>
    </div>

And here is your ngif

 <th scope="row">1</th>
      <td *ngIf="split == 'two' && home == 'home'" (change)="show == !show">sample text</td>
      <td *ngIf="split == 'two' && home == 'home'">sample text</td>
      <td *ngIf="split == 'two' && home == 'home'">sample text</td>

this is the demo url

Have a look, as this is working fine, Feel free to do discussion over this if needed.

Upvotes: 0

Arash
Arash

Reputation: 1826

Just change ngModels of Place radios to

<label class="radio-inline card-img-top"><input [(ngModel)]="place" ng-model="example2" type="radio" name="radio2" value="home">at home</label> <label class="radio-inline card-img-top"><input [(ngModel)]="place" type="radio" name="radio2" value="gym">in the gym</label>

And change all *ngIf s to

*ngIf="split2 && place === 'home'"

The point is RadioButton will bind the value to ngModel which is string just unlike checkbox which is store just True/False.

Upvotes: 0

poke
poke

Reputation: 387507

The problem is that the models are only mapping the values, they don’t actually care if the element stays selected. So what you need to do is reuse the same model multiple times and have the input elements set different values depending on what you have selected.

For example, you could modify your inputs like this:

<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="2">2</label>
<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="3">3</label>
<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="4">4</label>

<label><input [(ngModel)]="location" type="radio" name="location" value="home">at home</label>
<label><input [(ngModel)]="location" type="radio" name="location" value="gym">in the gym</label>

The first group will set the model property repeats to either 2, 3, or 4. The second group will set the model property location to either home or gym.

With that information, you can then adjust your conditions:

<tr>
  <th scope="row">1</th>
  <td *ngIf="repeats == 2 && location == 'home'" (change)="show == !show">{{home[0][0][1]}}</td>
  <td *ngIf="repeats == 2 && location == 'home'">{{home[0][0][0]}}</td>
  <td *ngIf="repeats == 2 && location == 'home'">{{home[0][1][0]}}</td>
</tr>

So basically, you now only check for the two properties repeats and location. When the selection of the radio buttons change, then those two properties will also update and the conditions will be re-evaluated.

Upvotes: 3

Related Questions