Angular 2 - Controles de terceros
Angular 2 te permite trabajar con controles de terceros. Una vez que decida qué control implementar, debe realizar los siguientes pasos:
Step 1 - Instale el componente usando el comando npm.
Por ejemplo, instalaremos el control de terceros ng2-pagination mediante el siguiente comando.
npm install ng2-pagination --save
Una vez hecho esto, verá que el componente se instaló correctamente.
Step 2 - Incluya el componente en el archivo app.module.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';
@NgModule ({
imports: [ BrowserModule,Ng2PaginationModule],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Step 3 - Finalmente, implemente el componente en su archivo app.component.ts.
import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';
@Component ({
selector: 'my-app',
template: '
<ul>
<li *ngFor = "let item of collection | paginate: {
itemsPerPage: 5, currentPage: p }"> ... </li>
</ul>
<pagination-controls (pageChange) = "p = $event"></pagination-controls>
'
})
export class AppComponent { }
Step 4 - Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.
En la imagen de arriba, puede ver que las imágenes se han almacenado como One.jpg y two.jpg en la carpeta Imágenes.
Step 5 - Cambie el código del archivo app.component.ts por el siguiente.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [{
"ID": "1",
"Name": "One",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"Name": "Two",
"url": 'app/Images/two.jpg'
} ];
}
Se deben tener en cuenta los siguientes puntos sobre el código anterior.
Estamos definiendo una matriz llamada appList que es del tipo any. Esto es para que pueda almacenar cualquier tipo de elemento.
Estamos definiendo 2 elementos. Cada elemento tiene 3 propiedades, ID, Nombre y URL.
La URL de cada elemento es la ruta relativa a las 2 imágenes.
Step 6 - Realice los siguientes cambios en el archivo app / app.component.html, que es su archivo de plantilla.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<li>{{lst.Name}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
Es necesario señalar los siguientes puntos sobre el programa anterior:
La directiva ngFor se usa para recorrer en iteración todos los elementos de la propiedad appList.
Para cada propiedad, utiliza el elemento de lista para mostrar una imagen.
La propiedad src de la etiqueta img luego se limita a la propiedad url de appList en nuestra clase.
Step 7- Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado. En la salida, puede ver claramente que las imágenes se han recogido y mostrado en la salida.