Is there a way to verify an if-else statement in the ngStyle background property with Angular 7?

Question

Is there a way to verify an if-else statement in the ngStyle background property with Angular 7?

I have a collection of cards that need to be shown in a component. Each card contains a cover-image with an URL fetched from the server. In my component.html, I am using ngFor as follows:

<div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img-area">
 </div>
 <div class="card-content-area">
  <p class="card-title cursor-pointer" (click)="navigateToCOmpany(row)">{{row.companyId.name}}</p>
 <div class="card-description-area">
    <p class="site-text">{{row.offer_desc}}</p>
 </div>
    <a (click)="referralClick(row, i)" class="site-btn show-desktop-block">Get referral link</a>
    <a (click)="referralClick(row, i)" class="site-link-mobile show-mobile-block"><i class="fa fa-link mobile-link" aria-hidden="true"></i> Get Referral link</a>
 </div>

The cover images are retrieved in row.companyId.coverUrl. If row.companyId.coverUrl does not exist in the API response, I want to use a hardcoded URL like ./assets/img/abc.jpg for the background instead.

How can I achieve this?

angular typescript ng-style

Answer 1

Answer №1

For the subscription stage, my suggestion would be:

...subscribe(
  (data:any) => {
    this.row = data;
   if (!this.row){
     this.row = {
       companyId: {
         coverUrl: './assets/img/abc.jpg'
       }
     }
   }
   else if (!this.row.companyId){
     this.row.companyId = {
       coverUrl: './assets/img/abc.jpg'
     }
   }
   else if (!this.row.companyId.coverUrl)
       this.row.companyId.coverUrl = './assets/img/abc.jpg';
  }
)

If you still have a URL and want to check if the image can be loaded, I recommend using http.get('imageURL').subsribe() and then test if it responds successfully.

I also advise checking out this helpful post

So, your code should look something like this:

In your TypeScript file:

localImg = "/assets/img/abc.jpg"

In your HTML file:

[style.background]="'url('+row.companyId?.coverUrl+'), url(' + localImg +')'"

Please note that this code has not been tested

Answer 2

For the subscription stage, my suggestion would be:

...subscribe(
  (data:any) => {
    this.row = data;
   if (!this.row){
     this.row = {
       companyId: {
         coverUrl: './assets/img/abc.jpg'
       }
     }
   }
   else if (!this.row.companyId){
     this.row.companyId = {
       coverUrl: './assets/img/abc.jpg'
     }
   }
   else if (!this.row.companyId.coverUrl)
       this.row.companyId.coverUrl = './assets/img/abc.jpg';
  }
)

If you still have a URL and want to check if the image can be loaded, I recommend using http.get('imageURL').subsribe() and then test if it responds successfully.

I also advise checking out this helpful post

So, your code should look something like this:

In your TypeScript file:

localImg = "/assets/img/abc.jpg"

In your HTML file:

[style.background]="'url('+row.companyId?.coverUrl+'), url(' + localImg +')'"

Please note that this code has not been tested

Answer 3

Answer №2

Utilizing Angular pipes in this particular context is a perfect fit.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'coverImage'
})
export class CoverImagePipe implements PipeTransform {
  public transform(row: any): string {
    if (row != null && row.companyId != null) {
      return `url('${row.companyId.coverUrl}')`;
    }
    return `url('./assets/img/abc.jpg')`;
  }
}

After creating the pipe, it can be incorporated in HTML like so:

<div [style.background-image]="row | coverImage" class="img-area"></div>

Answer 4

Utilizing Angular pipes in this particular context is a perfect fit.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'coverImage'
})
export class CoverImagePipe implements PipeTransform {
  public transform(row: any): string {
    if (row != null && row.companyId != null) {
      return `url('${row.companyId.coverUrl}')`;
    }
    return `url('./assets/img/abc.jpg')`;
  }
}

After creating the pipe, it can be incorporated in HTML like so:

<div [style.background-image]="row | coverImage" class="img-area"></div>

Is there a way to verify an if-else statement in the ngStyle background property with Angular 7?

Answer №1

Answer №2

Similar questions

Trouble loading Styled Components in React Typescript with Webpack configuration

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Is it true that a TypeScript derived class is not allowed to have identical variable names?

Fixing the "Cannot find name" error by targeting ES6 in the tsconfig.json file

Adding properties to React Component

Angular2 allows for the firing of all columns in one click using *ngFor

Incorporating a visual progress indicator on the webpage

The issue with Angular's Array.push method arises when only the last object in the array is being pushed after a mat-checkbox

Transforming an object's type into an array of different types

Could someone shed some light on why my code within the useEffect hook in my component is being triggered twice when it shouldn't be?

The Angular change detection mechanism is only triggered once when there are consecutive updates to the Ngrx store

ViewChild with the focus method

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Get the jsonarray file using express, node, and angular by downloading it

The header grid will disappear in the p-dialog when the browser is minimized

What are the steps to resolve the MSB4132 error in MSBUILD on a Windows 10 system?

Unidentified Angular NgRX action

Transforming the date from JavaScript to the Swift JSON timeIntervalSinceReferenceDate structure

Retrieve the variable only once a response has been received from the POST request

Errors occur with Metro bundler while utilizing module-resolver