Guide on toggling mat-checkbox according to API feedback in Angular 6

Just starting out with angular 6 and I'm attempting to toggle the mat-checkbox based on the API response.

However, I seem to be having trouble. All the checkboxes are showing as checked even when the API response is false.

<div class="col-sm-12" *ngFor="let data of summary">
   <mat-checkbox [checked]="data?.BUY_NOW_STATUS" class="mat-checkbox-inner-container">Buy now</mat-checkbox>
 </div>

The BUY_NOW_STATUS can either be 'true' or 'false'.

Any help in resolving this issue would be greatly appreciated.

angulartypescriptangular-material

Answer №1

This is the solution,

in HTML format

<div class="row" *ngFor="let item of products">
   <app-product [details]="item"></app-product>
 </div>

inside product.component.ts file

export interface Product {
   name : string;
   price : number;
   available : boolean;
}

in your app.component.ts file

products: Product[] = []

Remember to update the products array with API data.

getProducts(){
  this.productService.getAll().subscribe(products => {
     this.products = products; 
  });
}

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

Resolving redundancy in Typescript Material-UI Table codebases

Apologies for the ambiguous question title, it was difficult to come up with something more specific. I am currently exploring the Typescript implementation of Material-UI tables, specifically focusing on the table section titled "Sorting and selecting". ...

javascripttypescriptmaterial-ui

Sharing packages within nested scopes

Using @organization-scope/package/sub-package in npm is what I want to achieve. Here is my package.json configuration:- { "name": "@once/ui", ... ... } If I try the following:- { "name": "@once/ui/select-box", ... ... } An error pops up st ...

angularnpmangular5

What could be causing the sidebar animation to glitch in Internet Explorer when using an *ngFor loop?

I am facing an issue with my animation where it works perfectly in Chrome but not in IE. The desired effect is to slide a panel into view from outside the browser window, and upon clicking the exit button or <div> covering the rest of the page, the p ...

angularinternet-exploreranimationangular-animations

Leveraging React Hooks to display a dynamic pie chart by fetching and mapping data from an API

I have a task where I need to fetch data from an API that returns an object containing two numbers and a list structured like this... {2, 1 , []} The project I'm currently working on utilizes 'use-global-hook' for managing state in Redux. T ...

reactjstypescriptreact-hooks

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

I've developed a function that takes a dictionary object and matches an array as shown below: const dict = { CheckAStatus: "PASS", CheckAHeading: "", CheckADetail: "", CheckBStatus: "FAIL", CheckBHeading: "Heading1", CheckCStatus: "FAIL", ...

javascriptnode.jsangulartypescriptdictionary

Sharing content on an Angular 4/5 webpage

I find myself in a situation where I am required to share a link to my web application with a client, and they will be submitting a form on my webpage. This application has been developed using Angular 5. Despite searching online for a solution, I have not ...

angularpostangular5form-submitform-data

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Currently, I am facing an issue with my image upload functionality. My goal is to retrieve the width and height of each image before uploading them. However, I've encountered a problem where my function only provides the dimensions for the first image ...

javascriptangulartypescriptfilereader

Discovering the data type in Typescript through the use of Generics

In my data structure, I am using generics to build it. However, when I try to populate data, I encounter the need to convert simple formats into the correct types. The issue arises as the class is configured with Generics, making it difficult for me to det ...

typescriptgenerics

A guide to successfully deploying Angular 4 applications on app engine without the hassle of uploading a hefty 220MB of node_modules

Is it possible to deploy my Angular 4 apps on Google Cloud App Engine while only uploading the dist folder? I currently have 220mb of data in node_modules, but I only want to deploy the dist folder which is around 10mb after running ng build --prod. In t ...

angulargoogle-app-enginegoogle-cloud-platform

Tips for deleting multiple objects from an array in angular version 13

I am facing an issue where I am trying to delete multiple objects from an array by selecting the checkbox on a table row. However, I am only able to delete one item at a time. How can I resolve this problem and successfully delete multiple selected objects ...

javascriptarraystypescriptangular13

Having trouble with Nextjs API Integration - encountering error 404

I'm currently facing a major issue and I've hit a dead end. I've been spending days trying to connect my local nextjs 14 app to the CVENT API, but I keep receiving a persistent 404 error. Here's what is displayed in the frontend console ...

typescriptnext.jsnext.js14

A TypeScript class transferring data to a different class

I have a set of class values that I need to store in another class. function retainValues(data1,data2){ this.first = data1; this.second = data2; } I am looking for a way to save these class values in a different class like this -> let other = NewC ...

javascriptarraystypescriptclass

Enhance JQuery functionality using Typescript

Currently, I am in the process of developing a Typescript plugin that generates a DOM for Header and attaches it to the page. This particular project utilizes JQuery for handling DOM operations. To customize the plugin further, I aim to transmit config Opt ...

javascriptjquerytypescriptdefinitelytyped

Leveraging Next.js with TypeScript and babel-plugin-module-resolver for simplified import aliases

I am currently in the process of setting up a Next.js project with typescript. Despite following multiple guides, I have encountered an issue concerning import aliases. It's unclear whether this problem stems from my configuration or from Next.js its ...

typescriptimportnext.jsbabel-plugin

404 Error message encountered across all routes in a Node TypeScript Azure Function App - Resource not located

I keep encountering a 404 Not Found error on all routes while requesting my API. I am struggling to correctly write the code. Here's an example of my code: host.json: { "version": "2.0", "extensions": { & ...

node.jstypescriptazureazure-functions

Utilize NestJS to consume EventPattern exclusively when the header variable matches a specific value

I've been working on a NestJS project where I'm using a Kafka server to emit events and NestJS to consume them. My goal is to create a consumer with the topic my-topic that is triggered only when a specific value is present in the header variable ...

typescripteventsapache-kafkanestjs

How to include an image in a file type using Angular 2 and TypeScript

Is it possible to assign an image to a file type variable in Angular 2? I attempted the following approach: private file:File; setImage(){ this.file = "../assets/image/image.jpg" } Unfortunately, this method did not succeed. ...

fileangular

Upgrade from AngularJS 1.x to the latest version of Angular, AngularJS 2.x

Currently in the process of mastering AngularJS 2 in order to transition my applications from Angular 1.x. The differences between the two versions are quite significant. Can you please share the advantages of upgrading from Angular 1 to Angular 2? I am ...

angularjsangularangularjs-directive

Adding items to the array is only effective when done within the loop

My approach involves retrieving data from an API using axios, organizing it within a function named "RefractorData()," and then pushing it onto an existing array. However, I have encountered a problem where the array gets populated within a forEach loop, a ...

javascriptarraysnode.jstypescript

The pivotal Angular universal service

In my application, I have the need to store global variables that are specific to each user. To achieve this, I created a Service that allows access to these variables from any component. However, I am wondering if there is a way to share this service t ...

angulartypescriptsingleton