angular2 directives - Angular 2 bound values not shown until after mouse move when routing -

i have directive adds icon whatever element added to. when icon clicked, need call function in whatever component contains directive. function uses router.navigate navigate named-outlet new component. works, except after click icon, new contents of named router outlet don't show until move mouse.

here relevant parts of directive:

@directive({     selector: '[editable]',         }) ...     @output() doedit = new eventemitter<string>(); ... private emiteditmessage(){         console.log("emitting");   <-----just can see function called         this.doedit.emit(this.targetfield); } 

here use directive in template:

<span editable (doedit)="editfield($event)">     {{currentpersoninfo}}                               </span> 

here function parent component called when directive emits:

public editfield(fldname :string){     console.log("before nav");     this.router.navigate([{ outlets: { 'task-pane': 'edit' } }]);     console.log("after nav"); } 

when run , click on icon shown directive, see expected messages in console: "emitted", "before nav", "after nav". secondary route ("name:task-pane") doesn't update new contents until move mouse.

update: noticed this: if content in task pane hard-coded string, shown immediately. however, if add interpolated binding property of task pane component (e.g {{title}} ) hard-coded text before binding shows immediately. bound text , hard-coded text after doesn't show until move mouse.

here panel component:

@component({     ... }) export class personeditpanelcomponent extends basepanel{         constructor(){         super();         console.log("panel ctor");     }      public title: string = "edit person" } 

here panel template html:

this shows immediately.  {{title}}  , "title" won't show until move mouse after clicking icon 

finally, if put link on parent component directly calls editfield function (the same 1 called when directive emits), works - text (hard-coded , bound) shows immediately.

so, questions: there inherent in routing causing delay bindings being resolved? idea how fix this?

thanks!

solved. took different approach attaching event listener , got working. here details:

injected renderer2 via constructor on directive:

constructor(elem: elementref, private renderer: renderer2, private router: router) {} 

then after code added icon page, attached listener this:

this.renderer.listen(this.editicon, 'click', (evt) => {     this.doedit.emit(this.targetfield); }); 

where editicon dom element created , added:

    private editicon = document.createelement('a');     this.editicon.innerhtml = '<i class="fa fa-pencil" aria-hidden="true" style="font-size:18px; color:red;"></i>';     node.appendchild(this.editicon);