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


-

Popular posts from this blog

Apache NiFi ExecuteScript: Groovy script to replace Json values via a mapping file -

i working apache nifi 0.5.1 on groovy script replace incoming json values ones contained in mapping file. mapping file looks (it simple .txt): header1;header2;header3 a;some text;a2 i have started following: import groovy.json.jsonbuilder import groovy.json.jsonslurper import java.nio.charset.standardcharsets def flowfile = session.get(); if (flowfile == null) { return; } flowfile = session.write(flowfile, { inputstream, outputstream -> def content = """ { "field1": "a" "field2": "a", "field3": "a" }""" def slurped = new jsonslurper().parsetext(content) def builder = new jsonbuilder(slurped) builder.content.field1 = "a" builder.content.field2 = "some text" builder.content.field3 = "a2" outputstream.write(builder.toprettystring().ge...
Read more

node.js - How do I prevent MongoDB replica set from querying the primary? -

read-operations-only: is there way have mongodb replica set, make mongodb instance on box connected to, mongodb gets queried? i have 3 ec2 instances behind aws load balancer. on each ec2 instance runs mongodb, part of replica set. i have express endpoints on nodejs , connect replica set follows mongodb.mongoclient.connect('mongodb://1.1.1.1,2.2.2.2,3.3.3.3.', function (err, db) { if (err) { complete('{}'); } else { i distribute load of queries evenly across 3 instances of mongodb replica set instead of default having queries routed ec2 instance primary mongodb defined, because destroys point of load balancer (which balance load of queries across 3 instances evenly). my understanding when connecting mongodb replica set, primary instance selected unless primary instance down, , therefore purpose of every secondary instance serve backup. in example people call hot,cold,cold. because there 2...
Read more