typescript - Hovered mini profile in Angular 2 -

i have list of users. when move mouse on each user, want show mini profile.

@directive({   selector: '[mini-profile-directive]',   host: {     '(mouseenter)': 'onmouseenter($event)'   } }) export class miniprofiledirective {   private mouseenter = new eventemitter();    onmouseenter($event) {} } 

when use, use this:

<div *ngfor="let user of users" mini-profile-directive><div> 

however, want show something, directive cannot show something.

---

so create component.

@component({   selector: '[mini-profile-component]',   host: {     '(mouseenter)': 'onmouseenter($event)'   },   template: `` }) export class miniprofilecomponent {   private mouseenter = new eventemitter();    onmouseenter($event) {     // here won't run!   } } 

then use this, wrong.

<div *ngfor="let user of users" mini-profile-component></div> 

---

a way comes mind having both miniprofiledirective , miniprofilecomponent

<div *ngfor="let user of users" mini-profile-directive><div> <mini-profile-component></mini-profile-component> 

inside of miniprofiledirective, use service control show/hide of miniprofilecomponent.

any better ways? thanks

update

example hovered profile component

origin

as alternative of host binding can use listen method of renderer class this:

constructor(elementref: elementref, renderer: renderer) {   renderer.listen(elementref.nativeelement, 'mouseenter', (e) => this.onmouseenter(e)) } 

see working plunkr http://plnkr.co/edit/opghqkwlfj2b46dgduzh?p=preview