ngx-alias
Alias the result of expensive expressions in your Angular templates without using ngIf
.
Installation
Install ngx-alias
using your favourite package manager, e.g.
$ npm install ngx-alias
Add the NgxAliasModule
to an import in your app, e.g.
;;; ;
Now you can start using it in any templates used by the containing module.
Usage
The ngIf
structural directive provides a handy mechanism to provide an alias for the expression in the template, e.g.
{{ value }}
But if you never expect the input to ngIf
to be falsey then why use this directive? Worse still, consider what happens when the result of value$ | async
is 0.
This is where ngx-alias
comes in handy. You can swap out your ngIf
hack with the alias
directive:
{{ value }}
Now if the result is 0 the embedded template will still display.
Running the example app
Run ng serve ngx-alias-example
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Running unit tests
Run ng test
to execute the unit tests via Karma.