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.