title: Hovered mini profile in Angular 2
body: <p>I have a list of users. When I move my mouse over each user, I want to show a mini profile.</p>
  
  <pre><code>@Directive({
    selector: '[mini-profile-directive]',
    host: {
      '(mouseenter)': 'onMouseEnter($event)'
    }
  })
  export class MiniProfileDirective {
    private mouseEnter = new EventEmitter();
  
    onMouseEnter($event) {}
  }
  </code></pre>
  
  <p>When I use, I use like this: </p>
  
  <pre><code>&lt;div *ngFor="let user of users" mini-profile-directive&gt;&lt;div&gt;
  </code></pre>
  
  <p>However, I want to show something, Directive cannot show something.</p>
  
  <hr>
  
  <p>So I create a component.</p>
  
  <pre><code>@Component({
    selector: '[mini-profile-component]',
    host: {
      '(mouseenter)': 'onMouseEnter($event)'
    },
    template: ``
  })
  export class MiniProfileComponent {
    private mouseEnter = new EventEmitter();
  
    onMouseEnter($event) {
      // here won't run!
    }
  }
  </code></pre>
  
  <p>Then use like this, which is wrong.</p>
  
  <pre><code>&lt;div *ngFor="let user of users" mini-profile-component&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>A way comes into my mind is having both <code>MiniProfileDirective</code> and <code>MiniProfileComponent</code></p>
  
  <pre><code>&lt;div *ngFor="let user of users" mini-profile-directive&gt;&lt;div&gt;
  &lt;mini-profile-component&gt;&lt;/mini-profile-component&gt;
  </code></pre>
  
  <p>Inside of <code>MiniProfileDirective</code>, use Service to control show/hide of the <code>MiniProfileComponent</code>.</p>
  
  <p>Any better ways? Thanks</p>