Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.
En este artículo, veremos cómo usar Pagination en angular ng bootstrap. La paginación se utiliza para hacer un grupo de páginas.
Sintaxis de instalación:
ng add @ng-bootstrap/ng-bootstrap
Acercarse:
- Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
- Importe el módulo de arranque ng en module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ NgbModule ] - En app.component.html crea un componente de paginación.
- Sirve la aplicación usando ng serve.
Ejemplo 1: en este ejemplo, estamos haciendo una paginación con enlace de límite.
app.component.html
<br/> <h1>GeeksforGeeks</h1> <h3>Angular ng bootstrap</h3> <ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true" > </ngb-pagination>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
page = 4;
}
Producción:
Ejemplo 2: en este ejemplo, hemos establecido la paginación con enlace de límite en falso.
app.component.html
<br/> <h1>GeeksforGeeks</h1> <h3>Angular ng bootstrap</h3> <ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="false" > </ngb-pagination>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent }
from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
page = 4;
}
Producción:
Referencia: https://ng-bootstrap.github.io/#/components/pagination/overview