Listbox observable data and loader

[Unknown]

Hello,

I would like to add a loader or some texte like 'loading' when the listbox retrieve remote data. 

Here it is my setup : 

when is set an *ngIf and set datasource like this the rendering list template (itemTemplate) is not rendering. 

When delete the ngIf and set [dataSource]="data$ | async" the itemTemplate works.

Could you provide me some example which is working ?

      <div class="dual-list-wrapper" fxLayout="row" fxLayoutAlign="center center">

        <div fxFlex *ngIf="datas$ | async as datas">

          <ejs-listbox

            #list

            [selectionSettings]="selectionSettings"

            [sortOrder]="sortOrder"

            height="170px"

            [fields]="fields"

            [dataSource]="datas"

            [itemTemplate]="itemTemplate">

            <ng-template #itemTemplate let-data>

              <span class="element" style="flex-direction: row; display: flex">

                <div style="width: 100%">

                  <label>

                    <span class="breakValue" [innerHTML]="data.value | safeHtml"></span>

                  </label>

                </div>

              </span>

            </ng-template>

          </ejs-listbox>

        </div>

        <ng-template #loading>Loading...</ng-template>

      </div>

[YuvanShankar Arunagiri]

Hi FOULONT,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet and sample link. we can achieve your requirement by using *ngIf and elseBlock condition feature of the angular.

[app.component.html]:

<div fxFlex *ngIf="datas; else elseBlock">

  <ejs-listbox

    #list

    [selectionSettings]="selectionSettings"

    [sortOrder]="sortOrder"

    height="170px"

    [fields]="fields"

    [dataSource]="datas"

    [query]="query"

    [itemTemplate]="itemTemplate">

    <ng-template #itemTemplate="" let-data="">

      <span class="element" style="flex-direction: row; display: flex">

        <div style="width: 100%">

          <label>

            <span class="breakValue"  [innerHTML]="data.ProductName"></span>

          </label>

        </div>

      </span>

    </ng-template>

  </ejs-listbox>

</div>

<ng-template #elseBlock >Loading...</ng-template>

</div>

 

Sample link: https://stackblitz.com/edit/angular-ac2iy2?file=app.component.html

Could you please check the above code and get back to us, if you need any further assistance on this. 

 

Regards, 

YuvanShankar A