How to bind data in ngStyle using Angular

Question

I'm trying to bind data using Angular 8 but failing miserably. One of the methods I tried is as below:

<div class="speed" style="background-image: url('http://example.com/assets/images/meter.png')" [ngStyle]="{'--p':result.percentage}"></div>

and the output:

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');" ng-reflect-ng-style="[object Object]"></div>

I want the output to be:

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');--p:24;"></div>

FYI, {{result.percentage}} gives and an output 24.

Please ignore _ngcontent-kyh-c1="" which is generated by Angular 8.

the syntax is correct, but it wouldn't show `--p:24` because `--p` is not a valid css property — C.OG, Nov 26 '19 at 23:33
what are you trying to do? does it need to be in style? since style is just for inline css — C.OG, Nov 26 '19 at 23:39
`[ngStyle]="{'transform': 'rotate(' +result.percentage+ 'deg);'}"` I tried with this too but it's not working either. I'm trying to bind the data with this: https://jsfiddle.net/7j8zrfhn/1/ — Elaine Byene, Nov 26 '19 at 23:56

Vova Bilyachat · Accepted Answer · 2019-11-27T00:01:09.087

1

Add this into your ts component. It will add style to your component

import { DomSanitizer } from '@angular/platform-browser';
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.html',
    styleUrls: ['./my-component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent  {

    @HostBinding('attr.style')
    public get valueAsStyle(): any {
       return this.sanitizer.bypassSecurityTrustStyle(`--p: ${this.result.percentage}`);
    }

    constructor(private sanitizer: DomSanitizer) {}
}

Now in html you will have ..... So hostBinding is great way to modify your host components

Now I am able to use variable in nested html just using color: var(--p) will change my text to red. This is what I assume you want to achieve

edited Nov 27 '19 at 00:01

answered Nov 26 '19 at 23:48

Vova Bilyachat

18,765
4
55
80

I am new to Angular. I assume this would be for the .ts file? What do I put in the .html file to call this function? Where do I put the 1@HostBinding1 and DomSanitizer is unresolved. I'm sorry. I'm just new to Angular. – Elaine Byene Nov 26 '19 at 23:52
@ElaineByene Updated my answer, yes you right you put it into ts, and nothing need to be done inside of your template. – Vova Bilyachat Nov 26 '19 at 23:56
Error "HostBinding is not defined" in my console. Also, what do I put in the HTML to call this function? Thank you so much. – Elaine Byene Nov 26 '19 at 23:58
@ElaineByene Updated. you need to import it (If you are using vscode it should show you yellow bulb :) ) You dont need to anything in html, HostBinding is angular attribute, so angular will take care :) – Vova Bilyachat Nov 27 '19 at 00:02
Thank you. I mean what do I enter in my HTML so your angular code can detect where it goes: `
` – Elaine Byene Nov 27 '19 at 00:06
In this case try to remove host binding from valueAsStyle and in your html [attr.style]="valueAsStyle" – Vova Bilyachat Nov 27 '19 at 00:08
@ElaineByene But again I preffer to use host bindings, in terms of css variables is not important to put to exact element is important to put in root, for you case then I would have a component like my-progress and then it will have style in root. – Vova Bilyachat Nov 27 '19 at 00:11

How to bind data in ngStyle using Angular

1 Answers1