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 umng-template
contendo o HTML , é possível obter o contexto através da variávellet-'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âmetrolist
.
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);
});
}
}