Angular string interpolation within a style property not working

Question

Really hung up on this for a while.... shouldn't this work?

style="background-image:url('{{product.imageUrl}}')"

I couldn't reproduce in stack snippet, or Codepen because its angular specific.

I've tried suggestions from this thread to no avail:

https://github.com/angular/angular/issues/8745 https://github.com/angular/angular/issues/8491 https://github.com/angular/angular/issues/8514

It might be because I don't understand where I would put the 'safe' pipe in this situation. Thanks.

template context:

<div *ngIf="product.title"
    class="card">
    <!-- <img *ngIf="product.imageUrl"
        class="card-img-top"
        [src]="product.imageUrl"
        alt="{{product.title}}"> -->

    <div *ngIf="product.imageUrl"
        class="card-img-top scale-img"
        style="background-image:url('{{product.imageUrl}}')"></div>

    <div class="card-body">
        <h5 class="card-title">{{product.title}}</h5>
        <p class="card-text">{{product.price | currency}}</p>


        <div *ngIf="showActions && Cart"
            class="card-footer">


            <button [routerLink]="['/products/', product.$key]"
                class="btn btn-details btn-secondary btn-block">Details</button>


            <button *ngIf="Cart.getQuantity(product) === 0; else updateQuantity"
                (click)="addToCart()"
                class="btn btn-secondary btn-block">Add to Cart</button>

            <ng-template #updateQuantity>
                <product-quantity [product]="product"
                    [cart]="Cart"></product-quantity>
            </ng-template>
        </div>

    </div>

</div>

You sure that if you hardcode a url then it works fine?

void
– void

2018-03-04 18:09:51 +00:00
Commented Mar 4, 2018 at 18:09 — void
– void, Commented Mar 4, 2018 at 18:09
yea I made sure about that, weird right?

imnickvaughn
– imnickvaughn

2018-03-04 18:11:46 +00:00
Commented Mar 4, 2018 at 18:11 — imnickvaughn
– imnickvaughn, Commented Mar 4, 2018 at 18:11
and the commented out <img> tag works fine

imnickvaughn
– imnickvaughn

2018-03-04 18:12:54 +00:00
Commented Mar 4, 2018 at 18:12 — imnickvaughn
– imnickvaughn, Commented Mar 4, 2018 at 18:12

imnickvaughn · Accepted Answer · 2018-03-04 20:32:57Z

3

Usually we solve it by creating custom pipe like:

html

[style.backgroundImage]="product.imageUrl | safeStyle"

ts

@Pipe({
  name: 'safeStyle'
})
export class SafeStylePipe {
  constructor(private sanitizer: DomSanitizer) {}

  transform(val: string) {
    return this.sanitizer.bypassSecurityTrustStyle(`url('${val}')`);
  }
}

===========================================================================

I don't want to muddy this succinct answer but if you are still having trouble:

I was getting a "safeStyle not found" error, so I extracted the pipe.

Make another folder called 'pipes'
Make file. I called 'safe-style.ts'
Put this code within (editor wanted me to use PipeTransform):

import { PipeTransform, Pipe } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeStyle' }) export class SafeStylePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) { }

transform(val: string) { return this.sanitizer.bypassSecurityTrustStyle(url('${val}')); } }
Comment out the @Pipe code and delete the pipe imports you put within the component.
Import into component:

import { SafeStylePipe } from '../pipes/safe-style';
Declare your pipe in the app module and import it.
```
import { SafeStylePipe } from './pipes/safe-style';
```
... declarations: [ SafeStylePipe, ]
Should work but if you are still getting that error. I replaced (see template context)...
```
<p class="card-text">{{product.price | currency}}</p>
```

with

    <p class="card-text">{{product.price | safeStyle}}</p>

and somehow that made the error go away then I just changed it back to currency. I think this is a bug. But hey it works now.

Ng-run Example

edited Mar 4, 2018 at 20:32

imnickvaughn

3,0349 gold badges27 silver badges46 bronze badges

answered Mar 4, 2018 at 18:22

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

imnickvaughn Over a year ago

First off, thanks! Second, is that image loading for you? I am not experienced with creating my own pipes but I don't even see it in the example so I have to ask... maybe I'm having computer issues.

yurzui Over a year ago

I changed image :)

yurzui Over a year ago

@imnickvaughn Thank's for the edit. I thought you know how work with pipe)

Collectives™ on Stack Overflow

Angular string interpolation within a style property not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related