Search code examples
javascriptangulartypescriptnebularngx-admin

How to unchecked and check the Nebular Check box dynamically after rendering


I am using a nebular theme checkbox in the Angular 8 App.

 <nb-checkbox  [checked]="enable_checked" (checkedChange)="enable($event)"  >Enable </nb-checkbox>

i am updating the checkbox using "enable_checked" Boolean .When the component loaded it works fine but when I changed the value dynamically of BOOLEAN("enable_checked") it is not getting updated at the front end but the boolean is updated.


Solution

  • It's working you must change it like this :

    <nb-checkbox [checked]="enable_checked" (checkedChange)="enable($event)" >Enable </nb-checkbox>
    
    <button (click)="changeCheckbox()">Set false</button>
    

    For more information: Docs

    Typescript :

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      enable_checked = true;
    
      changeCheckbox() {
        this.enable_checked = false
      }
    }
    

    Stackblitz Example: link