Pagination in Angular

Pagination in Angular

To use Pagination NgxPaginationModule need to install

npm install --save ngx-pagination

once this is installed then add this module in app.module.ts and in import array

app.module.ts 

import { NgxPaginationModule } from  'ngx-pagination';

imports: [

        NgxPaginationModule,

   

    ],

app.Component.Html

in HTML we have create a list item in which we will apply pagination .

we have used paginate event to apply this . in ngFor itemsparpage is used to see how many item will be displayed .

<h1>Employee List</h1>

<ul>

    <li *ngFor = "let item of EmpListcollection | paginate: { itemsPerPage: 10, currentPage: p } " >

    {{item}}

</li>

</ul>

<pagination-controls (pageChange)="p = $event"></pagination-controls>

app.component.ts

in type script file we have created a collection which will be binded in list in HTML component

import { Component, OnInit } from '@angular/core';

import { stringify } from 'querystring';

@Component({

  selector: 'app-component',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class appComponent implements OnInit {

  EmpListcollection = [];

  mystring : string ;

  constructor() { }

  ngOnInit() {

    

    for (let i =1;i<50;i++)

          {

            this.mystring = 'Angular';

            this.mystring = this.mystring.concat('  Tyepscript ' + i + '.0');

            this.EmpListcollection.push(this.mystring)

          }

  }

}

Output .

Follow us on Shubh Techno Expert 

How to use Service in Angular App

How to call service in  Angular App      

component can not fetch data directly from database. so to fetch data from database API need to call in Angular App . With the help of service we can access method and properties across other component in the entire Projects

1. For this We need a Web API which we will call in our App to access the data .

Syntax to create Service

ng generate service servicename 

API URL : http://localhost:37187/Api/ViewContact/ViewEmpDetails

This API will Return data in Json Format .

    {
        "EMPCode": "E0001",
        "EmpName": "Nagendra1",
        "Email": "Nagendra@gmail.com",
        "Salary": "2500"
    },
   {
        "EMPCode": "E0002",
        "EmpName": "Nagendra2",
        "Email": "Nagendra@gmail.com",
        "Salary": "2700"
    },


Add this Module in App.Module.ts file 

import { HttpClient } from '@angular/common/http';

and add in import array also

import:[

HttpClientModule

       ]

see this full VDO on youtube on Shubh Techno Expert  Call web API in Angular

app.component.html

Here in HTML added one button in which called a method this method GetEmpDetails() will call the service and return the data .

And taken one table to bind this data .

<h1 align = "center">How to use Service in Angular App</h1>

<button type = "button" (click) ="GetEmpDetails()"  align ="Center" >Click Me</button>

<table border ="3">

    <th>EmpName</th><th>EmpCode</th><th>Salary</th><th>Email</th>

    <tr *ngFor = "let item of EmpServiceresponse">

        <td> {{item.EmpName}}</td>

        <td>{{item.EMPCode}}</td>

        <td> {{item.Salary}}</td>

        <td>{{item.Email}}</td>

    </tr>

</table>

app.component.ts

in app.component we have created the method to call the service . and initiated the service in constructor .

import { Component } from '@angular/core';

import {EmpserviceService} from './empservice.service'

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'MyService';

EmpServiceresponse : any ;

  constructor(private _EmpserviceService:EmpserviceService ){}

GetEmpDetails(){

  this._EmpserviceService.GetEmployeDetails().subscribe((respp)=>

  {

    this.EmpServiceresponse = respp;

    console.log(this.EmpServiceresponse);

  })

}

}

empentities.ts

This is the Entities in which data will be mapped.

export class Empentities {

    EMPCode: string;

    EmpName: string;

    Email: string;

    Salary : number;

}

empservice.service.ts

we have created this service by below command 

ng g service Empservice

once service is created then we will provide API url and call it in a method and provide its return type as JSON

import { Injectable } from '@angular/core';

import { HttpClient , HttpResponse, HttpHeaders } from '@angular/common/http';  

import { Empentities } from './model/empentities';

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class EmpserviceService {

  

 url = 'http://localhost:37187/Api/ViewContact/';  

  constructor(private http:HttpClient) { }

  GetEmployeDetails(): Observable<Empentities[]> {  

    

    return this.http.post<Empentities[]>(this.url+'/ViewEmpDetails', 

    {headers:new HttpHeaders({'Content-Type':'application/json'})});

  }  

}

app.module.ts

In App.module we will register our service and add the HttpClientModule Module in Import array .

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

import { EmpserviceService } from './empservice.service';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

  ],

  providers: [HttpClientModule,EmpserviceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

output

click on Button you will get the reponse 

Right click chosse inpect Element  and see the response on Console

Follow us :   Shubh Techno Expert on Youtube 

LocalStorage and session storage in Angular

How to access Local and Session variable in Angular

To Set Value in Session storage

Sessionstorage.SetItem('key','value')

To get Value from Session storage

Sessionstorage.getitem('key')

To set Value in Local storage

localstorage.SetItem('key','value')

To get Value from Local storage

sessionstorage.getitem('key')

How to Clear Session variable

sessionstorage.clear()

How to remove all session items .

sessionstorage.removeitem('key')

local storage works like Viewstate and session storage work like session variable .

http://xafdeveloper.blogspot.com

https://youtu.be/povG03z340E