Issue
I have 2 Angular directives: "dmKeyDownDetect" that detects an input and "dmKeyDownReact" that reacts with an action. When the first detects certain inputs (like '/', or 'Escape'), it needs to send that value to the second directive.
I managed to achieve that applying both directives in the template of a component: the first directive has an output (@Output() exactKeyDownDetected: EventEmitter = new EventEmitter();) that sends the value to a variable "lastKeyDown" of that component and then the components sends it to "dmKeyDownReact", like this:
<input
dmKeyDownDetect [detect]="['/']" (exactKeyDownDetected)="changeLastKeyDown($event)"
[dmKeyDownReact]="lastKeyDown" [action]="actionToDo"... >
Now, I would like to achieve the same directly from the template (basically the 2 lines here above), to remove the need of going through the component and creating an extra variable just to track the value. I imagine it to be something like:
<input
dmKeyDownDetect [detect]="['/']"
[dmKeyDownReact]="(exactKeyDownDetected)" [action]="actionToDo"
where [dmKeyDownReact]="(exactKeyDownDetected)" should accomplish taking the output from"dmKeyDownDetect" and sending it as input to "dmKeyDownReact".
Is there a clean way to do this?
Solution
you can do that with the help of template variables and exportAs
@Directive({
selector: '[dmKeyDownDetect]',
exportAs: 'dmKeyDownDetect'
})
class MyDirective {
lastKeyDown; // will be updated during event handling
}
....
<input
dmKeyDownDetect #detectDir="dmKeyDownDetect" [detect]="['/']"
[dmKeyDownReact]="detectDir.lastKeyDown" [action]="actionToDo">
Answered By - Andrei
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.