How to resolve the issue of checkbox not binding the value of an object field in Angular 4?

Can anyone help me with binding the field value in the current object and switching the checkbox based on its value?

This is my checkbox:

<label class="checkbox-inline checbox-switch switch-success">
<input
  #livingRoom
  type="checkbox"
  name="livingRoom"
  id="livingRoom"
  [checked]="showDefaultTypeRoom.isExistLivingRoom"
/>
<span></span>
</label>

I have tried changing showDefaultTypeRoom object and isExistLivingRoom, but the checkbox is not switching based on the isExistLivingRoom value. Any ideas on how to fix this?

angularcheckboxangular4-forms

Answer №1

Instructions:

<input type="checkbox" [(ngModel)]="example.value"/>

In your TypeScript file:

public example = {value: true};

Test it out here: https://stackblitz.com/angular/demklkjdbqq

(Alternatively, you can use the reactive form approach)

Answer №2

To improve your code, consider implementing two-way binding like this:

[(ngModel)]="showDefaultTypeRoom.isExistLivingRoom"

Instead of using one-way binding with checked attribute:

[checked]="showDefaultTypeRoom.isExistLivingRoom"

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

Issue with loading the schema in the angular.json configuration file

Encountering an issue within the angular.json file that needs attention. { "resource": "/e:/P dev/project/Resume_generator/front/angular.json", "owner": "_generated_diagnostic_collection_name_#1", "c ...

jsonangularnpmnpm-install

What sets [NgClass] apart from [class] in Angular JS2?

Consider a view element with the following three attributes: class="red" [class]="isGreen ? green : cyan" [ngClass]="'blue'" Does Angular merge the output of these attributes or does one override the others? If we have: [class]="getElementCla ...

angularbinding

How to easily upload zip files in Angular 8

Currently, I am working on integrating zip file upload feature into my Angular 8 application. There are 3 specific requirements that need to be met: 1. Only allow uploading of zip files; display an error message for other file types 2. Restrict the file s ...

htmlangulartypescriptfile-uploadangular8

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

cssangularangular-materialmaterial-ui

What is the best way to retrieve the object of the selected option from a single select input in Angular

I'm currently working with an array of objects that looks like this: let myArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}] I'm trying to retrieve object values based on a dropdown selection, but so ...

javascripthtmlangulartypescriptrxjs

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

javascriptangularpowershellangular-cli

Upon the initial loading of GoJS and Angular Links, nodes are not bypassed

Hey there, I'm currently working on a workflow editor and renderer using Angular and GoJS. Everything seems to be in order, except for this one pesky bug that's bothering me. When the page first loads, the links don't avoid nodes properly. H ...

angulartypescriptrenderinggojs

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

htmlangulartypescript

Issues encountered with sending post requests to a yii2 application when using Angular4

After implementing the following code: this.http.post('http://l.example/angular/create/', {name: 'test'}).subscribe( (response) => console.log(response), (error) => console.log(error) ); I encountered an error on ...

javascriptajaxangularhttpyii2

Using .htaccess with Angular is specifically designed to function within a subfolder of

After deploying my app on a Debian 11 Apache server within the folder var/www/html (specifically in var/www/html/foo), I encountered issues with routing and hard refreshing, resulting in a 404 error whenever I attempted to refresh a page. The Angular app c ...

angularapache.htaccessroutes

Sending data to back-end server using Multer, Node.js, and Express via a POST request

I have been facing an issue while trying to send a form from my local system to the backend server via a POST request. Every time, it seems to go with --binary-data instead of going with --form. Below is a sample curl command that I am looking to replicat ...

node.jsangularexpressmultipartform-datamulter

How to access a component attribute in a JavaScript library method in Angular 8

Within my Angular project, I am utilizing Semantic UI with the code snippet below: componentProperty: boolean = false; ngOnInit() { (<any>$('.ui.dropdown')).dropdown(); (<any>$('.ui.input')).popup({ ...

javascriptjqueryangulartypescript

What is the best way to trigger an API call every 10 seconds in Angular 11 based on the status response?

I am in need of a solution to continuously call the API every 10 seconds until a success status is achieved. Once the success status is reached, the API calls should pause for 10 seconds before resuming. Below is the code I am currently using to make the A ...

javascriptangulartypescriptrxjs

What is the proper way to link images from a node_module package?

Recently, I encountered a situation with my Angular component that I distribute via npm. It came to my attention that the component has a CDN dependency for an image. In order to avoid this dependency and have more control, I decided to include and distrib ...

angularnpmgulp

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

javascriptangulartypescriptspring-bootnested-loops

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?

My API returns JSON data that is not structured the way I need it, so I have to make changes. { "@odata.context":"xxxxxx", "id":"xxxxxxxx", "businessPhones":[ ], "displayName":"name", "givenName":"pseudo", "jobTitle":null, "ma ...

javascriptangulartypescriptclassinterface

Dockerized Nginx: Struggling with location configuration issues

Here is the docker file: FROM nginx:1.17.4-alpine # copy artifact build from the 'build environment' COPY ./dist /usr/share/nginx/html/ COPY ./default.conf /etc/nginx/conf.d/ # expose port 80 EXPOSE 80 # run nginx CMD ["nginx", "-g", "daemon o ...

angulardockernginx

When converting an NgbDate to a moment for formatting needs, there is a problem with the first month being assigned as 0 instead of 1

I am encountering a challenge with my Ngb-Datepicker that allows for a range selection. To customize the output format, I am using moment.js to convert the NgbDate into a moment object (e.g., Wed Jan 23). One issue I encountered was that NgbDates assign J ...

angularmomentjs

Troubleshooting service unit testing challenges in Angular 2 rc5

@Injectable() export class Service1 { constructor( private s2 : Service2 ) { console.log( s2.name ); } } @Injectable() export class Service2 { public name: string = 'Hi'; } //------------Testing with Mocks------------- l ...

angularjasmine

Do I have to wait for the HTTP get request to access the fetched object property?

I am currently working with Angular and TypeScript on a dish-detail component that is accessed through 'dishes/:id' The dish object returned has a property called components, which contains an array of objects with two properties: id: type stri ...

angulartypescript