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

Generating an array of keys from duplicated values in Typescript

Updating Firebase token in Angular when it has expired

Handling Concurrent HTTP Requests in Angular using RxJS (Independently Triggered)

detect the dismissal event in the modal controller from the main component

Issues arise after upgrading Node and npm, causing an inability to execute any npm command

When the URL is entered manually, there appears to be some unusual behavior with Angular

Securely transfer data between objects using a for loop

Exploring the method to retrieve a dynamically added property in Typescript

The classification of a property is determined by the types of the other properties present

The child module is unable to locate the route URL for the parent module

Guide to configuring the active Tab in Angular 6 using Angular Material Design

Can you explain the variances between the two Pick<T,K> util type implementations?

The interaction between Nextjs router and useEffect resulting in unintended re-rendering

Enter the newest addition of the node.js layer that bridges the gap between user interface and

Updating a component in Angular 4.3.1 from within an observable callback

Attempting to dynamically load an angular2 component upon the clicking of a tab has been my latest endeavor

Integrating Angular with Oracle

Issue with React.js code not being detected in TSX file (Visual Studio 2015 Update 1 RC)

Create generic functions that prioritize overloading with the first generic type that is not included in the parameters

Error encountered while attempting to globally install TypeScript using npm: "npm ERR! code -13"