NgStyle implementation in angular 6/7/8

Question

We have a implementation of NgStyle in our project , in versions 5 we had implementation as below ,

let divRef = new ElementRef(<HTMLDivElement>this._renderer.createElement("div"));
let divStyle = new NgStyle(this._differs, divRef, this._renderer);
        divStyle.ngStyle = {
            "position": "relative",
            "display": "block",
        };
        divStyle.ngDoCheck();

where _differs refers to KeyValueDiffers which is imported from @angular/core

but from angular 6 on-wards it has been changed to accepts only one parameter i.e delagate of type NgStyleImpl, can any one explain how to implement this

let style = new NgStyle(_delegate: NgStyleImpl)

how to implement _delegate: NgStyleImpl

This very much feels like you are not doing things the 'angular' way. 99.9% of the cases you should not need the renderer, or using `NgStyle` and `ElementRef` that way. I think you are better off finding a different way to tackle your general issue, than to fix this piece of code — Poul Kruijt, Aug 06 '19 at 11:48
As @PierreDuc says, this is very very often a bad idea to make HTML elements inside the (java/type)script component. You should be able to do what you wish to do using `*ngIf`, `*ngFor`, `[ngClass]`. If you believe you cannot, please tell us more about your need. — Random, Aug 06 '19 at 12:01
we have custom directive , in that this kind on NgStyle is implemented and as you see , we are creating a divref variable for that this style needs to be appended. — Harshavardhan N, Aug 06 '19 at 12:48

score 1 · Answer 1 · answered Aug 06 '19 at 12:40

This is a total nope. The idea of angular is to define a template and then use the .ts component to handle the business logic.

Seeing as what you are doing requires no logic, you can just use:

<div style="position: relative; display: block"></div>

If your styles are changing, for example, the display property, then you can define a div with [NgStyle] in the template:

<div style="position: relative" [NgStyle]="{'display': displayVariable}"></div>

and set displayVariable in your component (e.g ngOnInit):

this.displayVariable = 'block';

NgStyle implementation in angular 6/7/8

1 Answers1