Angular 2 - Third Party Controls


Advertisements

Angular 2 allows you to work with any third party controls. Once you decide on the control to implement, you need to perform the following steps −

Step 1 − Install the component using the npm command.

For example, we will install the ng2-pagination third party control via the following command.

npm install ng2-pagination --save

pagination

Once done, you will see that the component is successfully installed.

Component Installed

Step 2 − Include the component in the app.module.ts file.

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 − Finally, implement the component in your app.component.ts file.

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 − Save all the code changes and refresh the browser, you will get the following output.

Code Changes

APP Code

In the above picture, you can see that the images have been stored as One.jpg and two.jpg in the Images folder.

Step 5 − Change the code of the app.component.ts file to the following.

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

Following points need to be noted about the above code.

  • We are defining an array called appList which is of the type any. This is so that it can store any type of element.

  • We are defining 2 elements. Each element has 3 properties, ID, Name and url.

  • The URL for each element is the relative path to the 2 images.

Step 6 − Make the following changes to the app/app.component.html file which is your template file.

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

Following points need to be noted about the above program −

  • The ngFor directive is used to iterate through all the elements of the appList property.

  • For each property, it is using the list element to display an image.

  • The src property of the img tag is then bounded to the url property of appList in our class.

Step 7 − Save all the code changes and refresh the browser, you will get the following output. From the output, you can clearly see that the images have been picked up and shown in the output.

Picked up

Useful Video Courses


Video

AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma

Video

Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma

Video

Step By Step Angular For Beginnners

11 Lectures 7.5 hours

SHIVPRASAD KOIRALA

Video

Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain

Video

Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac

Video

JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac

Advertisements