Usage of local template variables in output callbacks (for example in *ngFor)

Sometimes it’s important to access not only the argument $event, but also the local template variables in the output callback, i.e. the array element (or index) coming from *ngFor. I propose below some solution, but I’m curious if you have any better approach or suggestions:

We could define an object for [outputs] not in the component controller (TS), but in the template (HTML), inside *ngFor and use there .bind (i.e. .bind(this, element, elementIndex)). But I have the following concerns:

• memory: creating a fresh function on each change detection 👎
• freezed order of arguments: the argument $event must be the last (as we can bind only local template variables, but the argument $event can be curried laizly only as the last one (when event occurs) . It’s an issue for library authors who sometimes need to add a new optional argument to an exising public method of a component and don’t want to reorder method’s arguments for backward compatibility

Maybe you have any other concerns? Or suggestions? Thanks in advance!

[gund]

I think that it’s not a good idea to introduce some kind of a custom variable like ndcEvent for passing the $event argument to the event handler.

Rather we can just bind the template arguments first to the handler function and then make the $event argument always last by convention. In this way we will not have to create extra stuff in templates and just assume that event is always the last argument in the handlers used with ndcArgs pipe.

So

• when user does not need any arguments - $event will be first and last in the handler:

[ndcDynamicOutputs]="{event: onEvent}"

onEvent(event: Event) {}

• when user needs extra variables with $event - then it will come last to the handler:

[ndcDynamicOutputs]="{event: onEvent | ndcArgs: arg1: arg2}"

onEvent(arg1: any, arg2: any, event: Event) {}

• when user needs extra variables but no $event - then he only receives those and may ignore last extra argument that we will pass anyways:

[ndcDynamicOutputs]="{event: onEvent | ndcArgs: arg1: arg2}"

onEvent(arg1: any, arg2: any) {}

As you may see - passing the $event argument as a last variable makes it easier for user to skip it and also does not introduce any extra template variables.

[gund]

🎉 This issue has been resolved in version 6.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀