Unable to activate nb-checkbox from Nebular theme in Angular due to unspecified issue

I recently started using the Nebular theme and encountered an issue with a checkbox that isn't functioning properly.

HTML

<nb-checkbox [value]="checked" (change)="toggle($event)"></nb-checkbox>

TypeScript

  toggle(checked: any) {    
    this.checked = checked.target.checked;
  }

Module.ts

//import
import { NbCheckboxModule } from '@nebular/theme';

imports: [NbCheckboxModule]

The toggle function is being called without errors, but the checkbox remains unchecked. I have spent considerable time debugging to no avail. Any insights into what may be causing this issue? Thank you for your help.

Angular Version: 7.1

Nebular version: ^3.5.0

angulartypescriptcheckboxangular7nebular

Answer №2

To incorporate this functionality in your web page, follow these steps:

<nb-checkbox status="primary" [value]="checked" (change)="setCheckedStatus($event)">Primary</nb-checkbox>

Make sure to include the following code in your component.ts file:

checked: true; // initialize this variable in your component
setCheckedStatus(checked) {
    console.log('checked', checked.target.checked);
    this.checked = checked.target.checked; // update your variable value accordingly
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animation for selecting the month in a date picker

Is there a way to disable the animation on the datepicker when choosing the month? I find the scrolling animation to be distracting and sluggish. ...

angularkendo-ui-angular2

Encountered issues with the BsModalService in displaying the modal functionality

I am encountering an issue while attempting to display a modal using a service. When I call the service from a button, everything works fine. However, I encounter an error when calling it from an error handler. TypeError: Cannot read property 'attach ...

angularngx-bootstrap

How can Angular2's templateUrl and styleUrls utilize relative paths?

As I was searching, I came across something called moduleId which is used to define relative paths for template and CSS files in Angular2 components. However, I'm unsure of the exact way to implement moduleId in our Angular2 components. The issue I&a ...

viewangularrelative-path

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

https://i.sstatic.net/wKeQk.png Is it possible to eliminate the AM / PM option from the input time format dropdown? The form builder currently uses a 24-hour format that includes the AM / PM field. ...

htmlcssangularinput

The Azure GraphQL serverless function encountering an issue with the Cosmos DB connection, displaying an

After developing a serverless GraphQL API function using Azure functions and connecting it to Cosmos DB, I have encountered an issue with "Invalid URL" that has been puzzling me for a week. Despite running the graphql function locally without any problems, ...

typescriptgraphqlazure-functionsazure-cosmosdb

Unable to retrieve local property when inside a Callback function in Ionic2

I am encountering an issue with my Ionic 2 app that utilizes Angular2. It is a basic problem, but it has been quite frustrating for me. Below is the component in question... import {Component} from "@angular/core"; @Component({ '<ion-content> ...

javascriptangularecmascript-6ionic2

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

Accessing form validation status of page 1 in Angular2 from page 2 - A simple guide

My current project utilizes Angular 4.2.x with two main pages: page 1 containing a form and page 2 serving as a summary page. Upon successful validation of all fields on page 1, I update a boolean flag in a shared service between the two pages. The expect ...

angularangular2-forms

An unusual problem encountered while working with NextJS and NextAuth

In my NextJS authentication setup, I am using a custom token provider/service as outlined in this guide. The code structure is as follows: async function refreshAccessToken(authToken: AuthToken) { try { const tokenResponse = await AuthApi.refre ...

typescriptauthenticationnext.jsnext-auth

Analyzing elements within an array using Angular 4

I have an array filled with various Objects such as: [ {"id":1,"host":"localhost","filesize":73,"fileage":"2018-01-26 09:26:40"}, {"id":2,"host":"localhost","filesize":21,"fileage":"2018-01-26 09:26:32"}, {...} ] These objects are displayed in the fol ...

angulartypescriptangular5

The issue of Angular 6 view failing to display accurate data upon page load

In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user i ...

javascripthtmlangular

Angular Express redirect and how to implement it

My SSR response service includes a redirect method along with other functionalities: import { Injectable, Inject } from '@angular/core'; import { Response } from 'express'; import { RESPONSE } from '@nguniversal/express-engine&ap ...

angularexpresshttp-redirectangular-universal

The array does not yield any values when utilizing Angular CLI

Recently, I created a component that contains an array of strings. Here's the code snippet for reference: import {Component} from '@angular/core'; @Component({ selector: 'app-products-list', templateUrl: './products-list. ...

angulartypescript

Troubleshooting: Issue with event subscriptions in Angular 2

I am trying to trigger an Angular 2 event, but the function that should run upon subscription is not being executed. In one of my files, I have the following code for subscribing to the event: listenToLoginEvents() { this.events.subscribe('user:log ...

angular

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

javascripthtmlangular

Why is the bearing attribute important in determining the location of an object?

I have started using this plugin to enable GPS functionality in my app. If you are interested, the link to the plugin can be found here: https://github.com/mauron85/cordova-plugin-background-geolocation My question is about the bearing property of the lo ...

angularcordovaionic-frameworkcordova-plugins

Creating a Typescript interface that includes keys from another interface

interface A{ a: string; b: string; c: string; // potentially more properties } interface B{ [K in keyof A]: Boolean; } What could be the issue with this code? My goal is to generate a similar structure programmatically: interface B{ ...

typescript

Retrieve a specific category within a method and then output the entire entity post adjustments

I need to sanitize the email in my user object before pushing it to my sqlite database. This is necessary during both user creation and updates. Here's what I have so far: export const addUser = (user: CreateUser) => { db.prepare(sqlInsertUser).r ...

typescript

Ways to usually connect forms in angular

I created a template form based on various guides, but they are not working as expected. I have defined two models: export class User { constructor(public userId?: UserId, public firstName?: String, public lastName?: String, ...

javascripthtmlangularvalidation

The react-bootstrap module does not have any members available for export

I'm looking to incorporate the npm module react-bootstrap from this link into my Layout component, following the ASP.NET Core 2.1 template client project structure. The challenge I'm facing is that the template uses a .js file extension, but I pr ...

reactjstypescriptnpmreact-bootstrap