I'm using Angular 5.2.9.
I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ?
1:<div #div>FOO BAR</div>
@ViewChild('div') div: ElementRef;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
this.renderer.setStyle(this.div.nativeElement, 'background', 'blue');
}
2:<div [ngStyle]="styleValue">FOO BAR</div>
styleValue: any = {};
ngAfterViewInit() {
this.styleValue = {background: 'blue'};
}
I know that it is easier to use "ngStyle" in a ngFor, eg:
<div ngFor="let elem of array" [ngStyle]="styleValue">
Otherwise you should do for this case: <div ngFor="let elem of array" #div>FOO BAR</div>
@ViewChildren('div') divs: QueryList<ElementRef>;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
this.divs.change.subscribe(() => {
this.toFlipArray.forEach((div) => {
this.renderer.setStyle(this.div.nativeElement, 'background', 'blue');
})
}
}
This seems much more longer in a ngFor to use Renderer2 and I have even not killed the subscription.
Is there a difference in performance ? Maybe somewhere else ?
Both ngStyle
and renderer.setStyle
are used to dynamically style a component
But renderer.setStyle
looks to take precedence over [ngStyle]
even if ngStyle
looks to be a type of embedded style.
Demo example:
https://stackblitz.com/edit/angular-jtdk4z?file=src%2Fapp%2Fapp.component.html
When looking to the internal implementation of ngStyle
:
https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_style.ts
it looks like it itself is implemented using renderer.setStyle
@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {
private _ngStyle: {[key: string]: string};
private _differ: KeyValueDiffer<string, string|number>;
constructor(
private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {}
@Input()
set ngStyle(v: {[key: string]: string}) {
this._ngStyle = v;
if (!this._differ && v) {
this._differ = this._differs.find(v).create();
}
}
ngDoCheck() {
if (this._differ) {
const changes = this._differ.diff(this._ngStyle);
if (changes) {
this._applyChanges(changes);
}
}
}
private _applyChanges(changes: KeyValueChanges<string, string|number>): void {
changes.forEachRemovedItem((record) => this._setStyle(record.key, null));
changes.forEachAddedItem((record) => this._setStyle(record.key, record.currentValue));
changes.forEachChangedItem((record) => this._setStyle(record.key, record.currentValue));
}
private _setStyle(nameAndUnit: string, value: string|number|null|undefined): void {
const [name, unit] = nameAndUnit.split('.');
value = value != null && unit ? `${value}${unit}` : value;
if (value != null) {
this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
} else {
this._renderer.removeStyle(this._ngEl.nativeElement, name);
}
}