Need more clarity on `renderer2` with directive

Question

In my directive I added a event listener like this:

//this is works by default
this.el.nativeElement.onfocus = function(e){
 that.warpper.classList.add("show");
}
    //this is works not works default
this.el.nativeElement.onblur = function(e){
  that.warpper.classList.remove("show");
}

then I added the following line to directive:

this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

after added the above, this is start works:

this.el.nativeElement.onblur = function(e){
    that.warpper.classList.remove("show");
}

As well I am not getting any console at:

this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

here is my directive code :

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { SharedDatasService } from '../shared/service/shared-datas.service';

@Directive({
    selector: '[fieldCleaner]'
})
export class FieldCleanerDirective {

    warpper:Element;
    link:any;

    constructor(private el:ElementRef, private renderer:Renderer2,
        private sharedData:SharedDatasService) {

        this.el.nativeElement.onfocus = function(e){
            that.warpper.classList.add("show");
        }

        this.el.nativeElement.onblur = function(e){
            that.warpper.classList.remove("show");
        }

        this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

    }

}

How can I understand the above behaviors? or what is wrong with my code?

I din't get any error at all.. that's what the issue to understand — 3gwebtrain, Jul 06 '18 at 04:03
Host binding not works with `iphone` chrome browsers ( some versions ) — 3gwebtrain, Jul 06 '18 at 04:17
I think you should listen to 'blur' event rather than 'onblur' — Avij, Jul 06 '18 at 04:23

score 0 · Answer 1 · answered Jul 06 '18 at 04:25

0

 constructor(private renderer2: Renderer2, private el: ElementRef) {

        this.renderer2.listen(this.el.nativeElement, 'blur', () => { console.log('event fired'); });
    }

answered Jul 06 '18 at 04:25

Avij

684
7
17

2

While this code snippet may be the solution, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-%E2%80%8C%E2%80%8Bcode-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Narendra Jadhav Jul 06 '18 at 04:43

Need more clarity on `renderer2` with directive

1 Answers1