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

Resetting forms in AngularJS 1.5.6 with ng-messages functionality

I have been searching for solutions on Stackoverflow regarding how to reset a form, but I am still not able to figure it out. Even though the input was valid, the error message kept showing up. Upon debugging the application, I noticed that the message was ...

javascriptangularjsangular-material

Require a property to be mandatory depending on the value of another property within a generic interface

Looking for a way to have one property affect the others in a react component interface? Here's an example of what I'm trying to achieve: export interface IMyAwesomeComponentProps<T = {}> { className: string defaultPath?: ISomeOthe ...

reactjstypescript

Definition of Promise resolve type in Visual Code's d.ts file

Need help with: // api.js export function getLayout(){ return axios.get('/api/layout').then(res => res.data) } // api.d.ts declare interface JSONResponse { meta: object, data: Array<Field> } export declare function getLayout ...

typescripttypescript-typingsvisual-studio-code

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

androidangulartypescriptcordova-pluginsionic3

Angular 2 form validation allowing submission to continue despite tag errors

Here is the code snippet provided: <form #theForm="ngForm" novalidate> <div *ngIf="pickUpAddress.cannotVerify"> <div class="form-group"> <sh-manual-address [(ngModel)]="pickUpAddress" #manualAddress="ngModel" [address]="pickU ...

angular

Steps for running a TypeScript project as a child process within a JavaScript project

I am facing an issue with integrating my Electron app, written mainly in JavaScript, with an Express server project built in TypeScript. When I attempt to create a child process of the TypeScript project within my electron.js file, I encounter TypeScript e ...

javascripttypescriptexpresselectrontsconfig

Adding an object to a dynamic Akita store containing an Array in an Angular application can be accomplished by following these steps

Currently, I am working on storing dynamic values in an Akita store without the need to create a Model. My challenge lies in adding an object to an existing array within the store. As someone who is new to Akita, my initial approach involved deep cloning ...

angularstate-managementangular-akitaakita

Angular - Switching Displayed Information

I am currently working with Angular 4 and I am attempting to switch between contenteditable="true" and contenteditable="false" Here is what I have so far: <h1 (dblclick)="edit($event)" contentEditable="true">Double-click Here to edit</h1> Al ...

javascriptangulartypescript

Creating a function in Typescript to extend a generic builder type with new methods

Looking to address the warnings associated with buildChainableHTML. Check out this TS Playground Link Is there a way to both: a) Address the language server's concerns without resorting to workarounds (such as !,as, ?)? b) Dodge using type HTMLChain ...

typescripttypescript-generics

Even after installing npm3, the npm -v command continues to display version 2.x.x

As I delve into the world of Angular 2, I learned that it requires npm version 3.x.x. Despite installing npm3 with the command npm install -g npm3, when I check my npm version using npm -v, it still shows as 2.15.8. Strangely, running npm3 -v displays vers ...

node.jsangularnpm

Typescript and Apollo Client return types intertwined

My goal is to create a simple function within a class that generates an Apollo Client. Below is the code I have implemented: import appConfig from 'config/app-config'; import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/clie ...

typescriptapolloreact-apolloapollo-client

Error message: "The function platform_browser_dynamic_1.bootstrap does not exist in Angular 2."

I had everything set up and running smoothly until suddenly I started receiving this error out of nowhere: TypeError: platform_browser_dynamic_1.bootstrap is not a function Here's the component I've been working on: import { Component, Input, ...

angularjsangular

What is the best way to arrange and manage assets?

I created a component with an image in it. The current file structure is like this: https://i.sstatic.net/hkZWG.png Now, my query is whether placing the assets folder inside the web folder is the right choice or not? UPDATE This is what I tried: impor ...

angulardart

In Angular 8, a communication service facilitates interaction between parents and children

Using a Sharing service, I am able to pass data from my app component to the router-outlet render component. While I have been successful in passing strings and other data, I am now looking for a way to retrieve data from an API and share it with a compone ...

angulartypescriptangular8angular-servicesangular-components

Trying out Angular2 service using a fabricated backend

Just a heads up: I know Angular2 is still in alpha and undergoing frequent changes. I am currently working with Angular2 and facing an issue with testing an injectable service that has a dependency on http. I want to test this service using a mock backend ...

httpdependency-injectiontypescriptangular

Using Angular 2 to efficiently recycle a subcomponent with the same form across multiple parent components while maintaining its state

I've been struggling to find someone with the same issue as me, even though the title may seem familiar. Perhaps I need help rephrasing my question? Here's an explanation: Use case: I have multiple routes (only 2 in the example below) set up fo ...

angularangular2-routing

Google Social Authentication with Angular + Angular Security Guards

Currently, I am working on incorporating an Angular Guard utilizing the Angular Social Login npm package: @Injectable({ providedIn: 'root', }) export class LoginGuard implements CanActivate { constructor(private router: Router, private authSe ...

angularrxjsgoogle-signinangular-social-login

What is the recommended data type for Material UI Icons when being passed as props?

What specific type should I use when passing Material UI Icons as props to a component? import {OverridableComponent} from "@mui/material/OverridableComponent"; import {SvgIconTypeMap} from "@mui/material"; interface IconButtonProps { ...

reactjstypescriptmaterial-ui

Issues with Rxjs pipe and Angular's Http.get() functionality are causing complications

Working with an Angular 4 Component that interacts with a Service to fetch data is a common scenario. Once the data is retrieved, it often needs to be transformed and filtered before being utilized. The prevailing method for this task is through the use of ...

angulartypescriptrxjsangular2-httprxjs-lettable-operators

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

unit-testingangulartypescript