1

I am new to angular 2. I was trying to change width of an element using 'ElementRef' and 'Renderer' which does not seem to work.

import { Directive, Renderer, ElementRef, HostListener } from '@angular/core';

@Directive({
    selector: '[myHighlight]'

})
export class myDir {
    constructor(private el: ElementRef, private ren: Renderer) {
    }
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('200');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight('30');
    }

    private highlight(width: string) {
        this.ren.setElementStyle(this.el.nativeElement, 'width', width);
    }
}
Improve this question
3
  • why are you using directives? you can handle them using events itself. Have a look at this answer Commented Mar 19, 2017 at 5:54
  • 2
    just wanted to handle things using angular2 Commented Mar 19, 2017 at 5:59
  • In what way is that answer different> Commented Mar 19, 2017 at 6:00
Related questions
0
Resizing div's in an AngularJS directive?
1
Set Width of HTML element at runtime in AngularJS
2
In Angular, how to get the width of an element from a directive?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.