ng-for-else

Enhanced ngFor. Display a template while the expression passed to ngFor returns null or an empty list

• Getting started
• Usage
• Demo
• Contributors ✨

This module extends ngFor capabilities and allows you to display a template while the expression passed to ngFor is empty or null. By installing this module you can still use the native ngFor just with extended features.

Getting started

To use ng-for-else you can install it from npm.

npm i ng-for-else

Usage

Use ngFor the way you normally do. For example to display a list.

<div
  class="bg-white rounded-lg shadow-lg p-5 mt-3 border border-slate-100"
  *ngFor="let dwarfClass of dwarfClasses"
>
  {{ dwarfClass }}
</div>

To use this directive you have to create a template with a templateReference which you want to display while the expression passed to ngFor is null or empty.

<ng-template #emptyListTemplate>
  <div
    class="bg-red-400 rounded-lg shadow-lg p-5 mt-3 border border-red-500 text-white"
  >
    Empty list
  </div>
</ng-template>

Once you have this you can use else in the ngFor expression to display your template.

<div
  class="bg-white rounded-lg shadow-lg p-5 mt-3 border border-slate-100"
  *ngFor="let dwarfClass of dwarfClasses; else: emptyListTemplate"
>
  {{ dwarfClass }}
</div>

Demo

Feel free to checkout and play with ng-if-else on our running demo application.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Kevin Kreuzer 💻

This project follows the all-contributors specification. Contributions of any kind welcome!