CODEWITHSUNDEEP
angularng-style
Harshavardhan N
Harshavardhan N

Reputation: 143

NgStyle implementation in angular 6/7/8

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

Upvotes: 0

Views: 418

Answers (1)

Maximillion Bartango
Maximillion Bartango

Reputation: 1599

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';

Upvotes: 1

Related Questions