Menu
in a component, im attempting to target a dom node and change it's style but this does not work, can anyone tell me what i am doing wrong here?
@Input() progress:number = 0;
...
ngOnChanges() {
this.progressInnerEl = this.elRef.nativeElement.querySelector('.progress-inner');
this.renderer.setStyle(this.progressInnerEl, 'width', this.progress+'%');
}
442
The Renderer class has been marked as deprecated since Angular version 4. This section provides guidance on migrating from this deprecated API to the newer Renderer2 API and what it means for your app.
Using Renderer2Use ElementRef & ViewChild to get the reference to the DOM element, which you want to manipulate. @ViewChild('hello', { static: false }) divHello: ElementRef; Use the methods like setProperty , setStyle etc to change the property, styles of the element as shown below.
The Renderer is a class that is a partial abstraction over the DOM. Using the Renderer for manipulating the DOM doesn't break server-side rendering or Web Workers (where direct access to the DOM would break). ElementRef is a class that can hold a reference to a DOM element.
Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the setProperty() or setAttribute() method.
Try this:
@HostListener('focus') onFocus() {
this._renderer.setStyle(this._el.nativeElement, 'width', '200px');
BTW Renderer is deprecated, so Renderer.setElementStyle was changed to Renderer2.setStyle.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
