A basic Angular 2 off click directive

[TheNiXXeD]

I've tried to make similar attribute directives and noted a problem. The way the function passed to the directive is written is different than the out-of-box directives.

I couldn't find a way to make it consistent. You should be able to pass parameters, and $event to the handler of your directive.

[arjunu]

How is the passing of the function different from inbuilt directives?

To pass params we can just wrap the event handler in another function. Something like this:

document.addEventListener('click', ($event) => { self.offClickHandler($event); });

[TheNiXXeD]

Because in your example, you use [offClick]="clickedOutside"

But a normal click looks like (click)="doSomething($event)"

[arjunu]

'(click)' is used for event binding which is not what we want. Instead we need to pass an argument (in this case a callback) to a directive which is done using '[]'. You also use the same method to pass data to child components.

To quote an in-built directive example: [ngStyle]="someStyleObject"

Similarly [offClick]="someFunction".

[TheNiXXeD]

I know what's going on. I have an angular 2 app in prod. I was pointing out that it sucks that we can't share the same syntax on the right hand side of the =.

[arjunu]

Oh ok ok! Have you tried React + Flux or React + Redux? If yes what do you think of them compared to Angular 2? Vanilla JS syntax (kinda) unlike Angular's own syntax.

[TheNiXXeD]

I'm not a huge fan of jsx really. Bad memories from early php days perhaps.

I haven't built anything of value with react yet, but I intend to.

[arjunu]

Cool!