CODEWITHSUNDEEP
htmlangulartypescriptbootstrap-4
CJP
CJP

Reputation: 99

Bootstrap´s 4 Checkbox on Angular 4

I´m trying to display content if an user click on a checkbox, using ngModel and ngIf directives. But it doesn´t works.

  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1"  name="Situacion" [(ngModel)]="Paso1.Acepta">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>

  <div *ngIf="Paso1.Acepta == 'true'">
    <p>...</p>
  </div

And in my TS i have this object

  Paso1:Object={
  Municipio: null,
  Provincia: null,
  CCAA: null,
  Longitud: null,
  Anchura: null,
  Acepta: true,
  }

What i'm doing wrong?

Upvotes: 0

Views: 3437

Answers (2)

DarthJDG
DarthJDG

Reputation: 16591

Paso1.Acepta is a boolean variable, but you're comparing it to the string 'true' in your ngIf condition.

Change your condition to simply "Paso1.Acepta" to check for a truthy value:

<div *ngIf="Paso1.Acepta">
    <p>...</p>
</div>

To explicitly check for the boolean true value, use strict equality and drop the quotes:

<div *ngIf="Paso1.Acepta === true">

Upvotes: 1

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4281

Without comparing just add the variable. 

 <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1"  name="Situacion" [(ngModel)]="Paso1.Acepta">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>

  <div *ngIf="Paso1.Acepta">
    <p>...</p>
  </div>

Upvotes: 0

Related Questions