@sam-senior/infinite-scroll

Infinite scroll

Como usar

Importe o infinite-scroll para o projeto e adicione a tag <sam-infinite-scroll> no HTML.

Parâmetros

• list: Para este parâmetro deve ser passado um lista a ser iterada, retornando um template.
• template: Deve ser passado um ng-template contendo o HTML , é possível obter o contexto através da variável let-'contexto'.
• totalElements: Número máximo de elementos que contém a lista.
• endOfElementsLabel: Label a ser exibida que não existir mais elementos na lista.
• styleClass: utilizar para passagem de classes CSS para dentro do container.

Retornos

• scrollBottom: sempre que chegar ao final da página, é emitido um evento para que uma nova busca seja realizada e atualizado o valor do parâmetro list.

Exemplo de implementação .html

<sam-infinite-scroll [list]="people" styleClass="ui-g-3"
[template]="`template`"(scrollBottom)="onScrollBottom()"
[totalElements]="totalElements" endOfElementsLabel="Sem elementos">
    <ng-template `#template` let-person>
	    <span>{{person.roleObject}}</span>
	</ng-template>
</sam-infinite-scroll>

Exemplo de implementação .ts

export  class  PersonCardComponent  implements  OnInit {
    public people: [...];
    public totalElements = 50;
     
    public onScrollBottom() {
	    request....subscribe(peoples => {
		    this.totalElements += peoples.length;
		    this.peoples.concat(peoples);
		});
	}
}