Angular 2 - Controles de terceiros

O Angular 2 permite que você trabalhe com qualquer controle de terceiros. Depois de decidir sobre o controle a ser implementado, você precisa executar as seguintes etapas -

Step 1 - Instale o componente usando o comando npm.

Por exemplo, instalaremos o controle de terceiros ng2-pagination por meio do seguinte comando.

npm install ng2-pagination --save

Uma vez feito isso, você verá que o componente foi instalado com sucesso.

Step 2 - Inclua o componente no arquivo 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 o componente em seu arquivo 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 - Salve todas as alterações de código e atualize o navegador, você obterá a seguinte saída.

Na foto acima, você pode ver que as imagens foram armazenadas como One.jpg e two.jpg na pasta Imagens.

Step 5 - Altere o código do arquivo app.component.ts para o seguinte.

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'
   } ];
}

Os seguintes pontos precisam ser observados sobre o código acima.

Estamos definindo um array chamado appList, que é do tipo any. Isso é para que ele possa armazenar qualquer tipo de elemento.
Estamos definindo 2 elementos. Cada elemento possui 3 propriedades, ID, Nome e url.
O URL de cada elemento é o caminho relativo para as 2 imagens.

Step 6 - Faça as seguintes alterações no arquivo app / app.component.html, que é o seu arquivo de modelo.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

Os seguintes pontos devem ser observados sobre o programa acima -

A diretiva ngFor é usada para iterar por todos os elementos da propriedade appList.
Para cada propriedade, ele usa o elemento da lista para exibir uma imagem.
A propriedade src da tag img é então limitada à propriedade url de appList em nossa classe.

Step 7- Salve todas as alterações de código e atualize o navegador, você obterá a seguinte saída. Na saída, você pode ver claramente que as imagens foram selecionadas e mostradas na saída.

↰ Previous page Next page ↱