Igniteui-angular: igx-list Show load message

[Hypenate]

Description

Show a (custom) message that the data is being retrieved by setting a isLoading to true (and setting loadingListMessage).

Result

A message is shown when the data is being retrieved.
It would be nicer to show the igx-circular-bar that would keep on running but I was not able to make that.

Note

Important to differentiate that it's not the list that is loading but the data is being retrieved by the back-end.

[kdinev]

We discussed this internally and decided that it's better to be done with separate templates for empty state and loading state. The loading input should still be exposed in order to *ngIf the loading state, but a full blown template is better than simply a message, because it would allow for custom loading indicators, which are not just message, as well as for images, etc.

@gedinakova Will add some suggestions as code examples.

[gedinakova]

@Hypenate,
In order to keep the list component behavior and API consistent we would like to recommend the following adjustments which will allow for displaying more complex UI during long data loading operations.

1. The isLoading input should remain as is:

@Input()
public isLoading = false;

1. Instead of updating the empty list template, we suggest adding to the list component template a new one, covering the data loading scenario, similar to:

<ng-template #defaultDataLoading>
    <article class="message">
        <p>Loading data ... </p>
    </article>
</ng-template>

1. Then, implement an IgxDataLoadingTemplateDirective which will allow providing easily a custom template when necessary.

@Directive({
    selector: '[igxDataLoading]'
})
export class IgxDataLoadingTemplateDirective {
    constructor(public template: TemplateRef<any>) { }
}

1. Next, we should update the list.component.ts with a couple properties defining the default and the custom templates:

    /**
     *@hidden
     */
    @ContentChild(IgxDataLoadingTemplateDirective, { read: IgxDataLoadingTemplateDirective })
    public dataLoadingTemplate: IgxDataLoadingTemplateDirective;
    /**
     *@hidden
     */
    @ViewChild('defaultDataLoading', { read: TemplateRef })
    protected defaultDataLoadingTemplate: TemplateRef<any>;

1. Finally, update the template property getter as follows:

     /**
     * Returns the `template` of an empty list.
     * ```typescript
     * let listTemplate = this.list.template;
     * ```
     * @memberof IgxListComponent
     */
    public get template(): TemplateRef<any> {
        if (this.isLoading) {
            return this.dataLoadingTemplate ? this.dataLoadingTemplate.template : this.defaultDataLoadingTemplate;
        }
        return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;
    }

The above listed changes will result into the following list definition:

<igx-list [isLoading]="true">
    <igx-list-item *ngFor="let fruit of fruits">
        {{ fruit.name }}
    </igx-list-item>
    <ng-template igxDataLoading>
        <p>Data is still loading ...</p>
    </ng-template>
</igx-list>

[Hypenate]

First of , thank you @gedinakova and @kdinev !

I must take a look at step 3 and 4, but the rest I understand.
One would be able to overwrite the template with it's own implementation.