What is the best way to incorporate a background image using ngStyle?

I need help populating multiple cards in the following way:

<mdl-card *ngFor="let product of templates" class="demo-card-event" mdl-shadow="2" [ngStyle]="{ 'background-color': 'lightgray' }">
    <mdl-card-title mdl-card-expand>
        <h4>
            {{product.name}}
        </h4>
    </mdl-card-title>
    <mdl-card-actions mdl-card-border>
        <button mdl-button mdl-colored mdl-ripple (click)="booknow()">
            Show
        </button>
        <mdl-layout-spacer></mdl-layout-spacer>
        <mdl-icon>event</mdl-icon>
    </mdl-card-actions>
</mdl-card>

The CSS currently changes the background color dynamically to lightgrey, but I want to apply 

background: url(-- here I want product.img --)
. Each object in my templates array has a property called img which contains a URL.

How can I update my code to achieve this?

angulartypescript

Answer №1

To implement this, you can define it like so:

<div ...[ngStyle]="{background: 'url('+ item.picture+')'"....>

Here the picture corresponds to the image property of the item.

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

Sending a POST request in Node.js and Express may result in the request body being empty or undefined

Here is a snippet of my Typescript code: import express = require('express'); const app: express.Application = express(); const port: number = 3000; app.listen(port, () => { console.log("The server is now running on port" + port); ...

node.jstypescriptexpresspostman

Error: When trying to run the server using npm, the program returned the message '. is not a recognized command, either internally or externally

I'm currently facing an issue with Angular and npm that I have not been able to resolve yet. The project I am working on can be found at this GitHub repository. While this code has worked for others, it seems like the problem lies on my end. When I r ...

angularnpmnpm-run

Utilizing Observable Data in Angular 4 TypeScript Components

Looking to extract and assign a JSON value obtained from an API into a variable. Here is an example: TS this.graphicService.getDatas().subscribe(datas => { this.datas = datas; console.log(datas); }); test = this.datas[0].subdimensions[0].entr ...

javascriptangulartypescript

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers). However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying vario ...

javascriptangulartypescript

What is the best way to run tests on this method using Jest?

import { format, getDaysInMonth, getMonth, getYear, isValid, parse } from "date-fns"; export class DateService { public getDaysInMonth(month?: Date) { return getDaysInMonth(month || new Date()); } What is the best way to test this func ...

reactjstypescripttestingjestjs

How should the Facebook avatar be displayed using AngularFire in a correct manner?

I am working on an app where I want to display the avatar of the logged-in Facebook user, but I'm struggling to find a clean solution. To show the user's avatar, you need to have their user_id and accessToken. While user_id can be obtained using ...

angularfacebook-graph-apiangularfire2

Using computed properties with Nuxt's `head` property can result in error messages being displayed

While utilizing Nuxt.js, I am using head() { } method to configure SEO metadata. However, when accessing computed properties within this method, Vetur displays the following message: Property 'domain' does not exist on type 'CombinedVueInst ...

typescriptvue.jsnuxt.jsvetur

You can't observe the behavior of simulated functions in a class with a manually created mock

Kindly note that I have set up a comprehensive Github repository where you can download and explore the content yourself here I am currently working on mocking a non-default exported class within a module using a manual mock placed in the folder __mocks__ ...

reactjstypescriptjestjs

How can I incorporate multiple quality sources into a flowplayer using Angular?

Is there a way to add multiple sources with different qualities like 1080p, 720p etc.? Thank you in advance. flowplayer('#my_player', { src: '../assets/videos/video_1080p.mp4', // title: 'This is just demo&apo ...

htmlnode.jsangulartypescriptflowplayer

Why do the RouteConfig and classes necessitate the inclusion of a service and router in their constructors?

While working with a sample code in the Angular2 framework, specifically the Heroes sample, I have encountered something that I am struggling to understand. What determines the order of dependencies in the constructor, like Router, Service or vice versa? ...

angularangular-dart

How can I display JSON values without revealing the parent in Angular 5 and Ionic 3?

I am trying to extract values from JSON without the parent keys. Here is the JSON structure I have: [ { "companies": [{ "id": 1, "name": "Prueba", "company_number": "23423423A", "latitude": 241241.12, "lo ...

angulartypescriptionic-frameworkangular5

Interacting Angular 4 Modules communicate with one another

If I have two modules, one for Customers and one for Orders, structured like this: /customers /customers-list.component.html /customers-list.component.ts /customers-details.component.html /customers-details.component.ts /customers-crea ...

angularcircular-dependency

Configuring NextUI with Next.js and TypeScript - CssBaseline component not found in @nextui-org/react package

Struggling to find reliable resources for installing Next.js and NextUI with the latest versions? The most helpful guide I found was this one, but not everything aligns perfectly. The guide instructs me to import CssBaseline like this: import { CssBaselin ...

reactjstypescriptnext.jsnextui

The ng-bootstrap package is not fully compatible with Bootstrap 4 Alpha 6, particularly when it comes to collapsible elements such as forms

Just a heads up for everyone, the current version of ng-bootstrap is not compatible with the latest release of Bootstrap (Alpha 6). This includes collapsing elements like collapses, dropdowns, navs, etc. I haven't figured out how to make the package ...

angularng-bootstrap

Creating an interface for React props

Hey everyone, I'm facing an issue and need some advice. I prefer using interfaces to maintain readability and utilize intellisense in my code. However, I'm struggling with implementing this approach when working with data passed through props. H ...

reactjstypescriptcomponents

The functionality of CDK Drag Drop is not accurately adjusting the placement of images

I have implemented an image gallery and am working on rearranging the position of the images using the Drag & Drop cdk library. However, I am facing an issue where the swapping of images does not always occur correctly; sometimes when attempting to exchan ...

angulartypescriptangular-materialangular-cdkangular-cdk-drag-drop

The custom resolver for product page metadata is not being activated

I'm having an issue with implementing Meta Description on my PDP page in Spartacus version 6.5. I have added a resolver that extends ProductPageMetaResolver into the providers section of my custom product.module file. However, for some reason, my &apo ...

angularmeta-tagsspartacus-storefront

Modifying state within reducers is not allowed

Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...

angulartypescriptreduxngrx

The CORS Policy has prevented Angular from accessing the header, as the request header field for authentication is restricted

After reviewing a multitude of similar questions regarding CORS and headers, I have attempted various solutions but I am still encountering this error specifically in Google Chrome. Access to XMLHttpRequest at 'https://service.domain.com/clientlist&ap ...

angularrequestheadercors

New feature incorporated at the end of choices in MUI auto-suggest widget

Currently, I'm working on enhancing a category adder feature. Previously, I had limited the display of the "add category chip" to only appear for the no-options render scenario. However, I came across an issue where if there was a category like "softw ...

javascriptreactjstypescriptmaterial-ui