app/sitesearch/shared/pagination/pagination.component.ts
| selector | app-pagination |
| styleUrls | ./pagination.component.scss |
| templateUrl | ./pagination.component.html |
Properties |
|
Methods |
|
Inputs |
constructor(loadingService: LoadingIndicatorService)
|
||||||
|
Parameters :
|
| id | |
| pagination | |
| Public goTop |
goTop()
|
|
Scrolls to top of the results when changing page
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public selectPage | ||||
selectPage(page)
|
||||
|
Search for results on clicked page
Parameters :
Returns :
void
|
| Public loadingService |
Type : LoadingIndicatorService
|
import { Component, OnInit, Input , Inject} from '@angular/core';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
@Input() pagination;
@Input() id;
constructor(
public loadingService: LoadingIndicatorService
) { }
ngOnInit() {
}
/** Scrolls to top of the results when changing page */
public goTop() {
const comp = document.getElementById(`result-${this.id}`);
if (comp) { comp.scrollIntoView(); }
}
/** Search for results on clicked page */
public selectPage(page) {
this.loadingService.show();
page.select();
this.goTop();
}
}
<nav class="pagination" role="navigation">
<div class="nav-item" *ngIf="pagination.previousPage" rel="prev" (click)="selectPage(pagination.previousPage)">
<i class="fas fa-chevron-left"></i>
</div>
<div class="pagination-item" *ngFor="let page of pagination.pages" [ngClass]="{'selected': page.selected}" (click)="selectPage(page)">
<span>
{{page.displayName}}
</span>
</div>
<div *ngIf="pagination.nextPage" class="nav-item" rel="next" (click)="selectPage(pagination.nextPage)">
<i class="fas fa-chevron-right"></i>
</div>
</nav>
./pagination.component.scss
@import "src/app/styles/helpers";
.pagination{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: calc-rem(20);
@media (max-width: 575px) {
.pagination-item, .nav-item {
@include font-size(14);
padding: 4px 9px;
margin-right: 1px;
}
}
@media (min-width: 576px) {
.pagination-item, .nav-item {
@include font-size(15);
padding: 10px 15px;
margin-right: 5px;
}
}
.pagination-item {
border-radius: 3px;
text-align: center;
cursor: pointer;
&:hover {
background-color: $cool-grey;
color: white;
}
&.selected {
background-color: $cool-grey;
color: white;
}
}
.nav-item {
border-radius: 3px;
text-align: center;
cursor: pointer;
&:hover {
transform: scale(1.2);
transition: all 0.15s ease-out;
}
}
}