Microsoft.Net Developer: October 2019

Angular 6 : Local Storage

Sometime, we need to store some data in client side, so we can use cookie and local storage,

Here is the example of local storage.

Component



export class LocalStorageComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    //remove value if exists

    //localStorage.removeItem('loggedInUser');

  }

  setlocalstorage() : void{

    let userObj = { name: 'Rohit', lname: 'Rathod' };

    localStorage.setItem('loggedInUser', JSON.stringify(userObj));

  

  }

  getlocalstorage() : void{    

    if (localStorage.length > 0) 

    {

      // We have items

      let item = JSON.parse(localStorage.getItem('loggedInUser')); 

      if(item != null)

      {

        console.log(item)

        console.log(item.name)

        console.log(item.lname)

      }

    } 

    else 

    {

      // No items

      alert('no local data')

    }

  }

}

HTML



<button (click) = "setlocalstorage()">Set Storage</button>

<button (click) = "getlocalstorage()">Get Storage</button>

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Submit model base Form

Here is the example to submit model base form in angular 6

app.module



import { FormsModule } from "@angular/forms";





 imports: [

   ...

    FormsModule ,

    ...

  ]

Model



export class Employee {

    EmployeeID : number;

    FullName : string;

    EmpCode : string;

    Mobile : string;

    Position : string;

}

Component



export class EmployeeComponent implements OnInit {

  formData : Employee;

  constructor() { 

    this.formData = {

      EmployeeID : null,

      FullName : '',

      EmpCode: '',

      Position: '',

      Mobile: ''

    }

   }

  ngOnInit() {

  }

  submitform() : void{

    console.log("FullName = " + this.formData.FullName)

    console.log("EmpCode = " + this.formData.EmpCode)

    console.log("Position = " + this.formData.Position)

    console.log("Mobile = " + this.formData.Mobile)

    //TODO

    //Call service to insert data

  }

}

HTML




<form #form="ngForm" (submit)="onSubmit(form)" autocomplete="off">

  <div class="form-group">

    <label>Fullname</label>

    <input name="FullName" #FullName="ngModel" [(ngModel)] = "formData.FullName" class="form-control" required>

    <div class="validation-error" *ngIf="FullName.invalid && FullName.touched">Fullname is required</div>

  </div>

  <div class="form-group">

    <label>Position</label>

    <input name="Position" #Position="ngModel" [(ngModel)] = "formData.Position" class="form-control">

  </div>

  <div class="form-row">

    <div class="form-group col-md-6">

      <label>EmpCode</label>

      <input name="EmpCode" #EmpCode="ngModel" [(ngModel)] = "formData.EmpCode" class="form-control">

    </div>

    <div class="form-group col-md-6">

      <label>Mobile</label>

      <input name="Mobile" #Mobile="ngModel" [(ngModel)] = "formData.Mobile" class="form-control">

    </div>    

  </div>

  <div class="form-group"> 

    <button type="button" [disabled]="form.invalid" (click) = "submitform()" class="btn btn-lg btn-block">

      Submit Button

    </button>

  </div>

</form>

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Error while creating new component

Sometime, we get error while creating new component in angular6 project,

Error - "More than one module matches. Use skip-import option to skip importing the component into the closest module."

Solution

ng g c componentName --module app

or

ng g c componentName --module=app.module

or

ng g c componentName --skip-import

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Load more data on page scroll

Instead of pagination, Load more data on page scroll.

Installation

npm install ngx-infinite-scroll --save

Register

Update app.module.ts


import { InfiniteScrollModule } from 'ngx-infinite-scroll';



imports: [

    ...,

    InfiniteScrollModule,

    ...

  ],

Model




export class country{

    ID : number;

    Name : string;

}

export class countries{

    ID : number;

    Name : string;

    constructor(item?: country) {

        if (item != undefined) {

            for (let key in item) {

                try { this[key] = item[key]; }

                catch (e) { }

            }

        }

    }

}

Component.ts



export class DemoScrollDataComponent implements OnInit {

  

  page: number = 1;   

  records: country[] = []; 

  

  constructor(private countryService : CountryService) { }

  ngOnInit() { 

  this.getData(0);  

}  

getData(page : Number) {  

  console.log(this.page);  

  this.countryService.getCountry(this.page).subscribe((res) => this.onSuccess(res)); 

}  

// When we got data on a success  

onSuccess(res) {  

  console.log(res);  

  if (res != undefined) {  

    res.forEach(item => {  

      this.records.push(new countries(item));  

    });  

  }  

}   

  

onScrollDown (ev) {

  console.log('scrolled down!!', ev);

  this.page = this.page + 1;  

  this.getData(this.page);   

}

 

onUp(ev) {

  console.log('scrolled up!', ev); 

}

}

HTML



<div class="search-results"

      infinite-scroll 

      [infiniteScrollDistance]="0"

      [infiniteScrollUpDistance]="10"

      (scrolled)="onScrollDown()"

      (scrolledUp)="onUp()">

  <div *ngFor="let item of records" style="padding:20px">

    {{ item.ID }} - {{ item.Name }}

  </div>

</div>

Service



export class CountryService {

  constructor(private http:HttpClient) { }

  getCountry(pageNumber : Number): Observable<country[]> {

    return this.http.get<country[]>('http://localhost/DemoApp.API/api/CountryListPage?pageNumber='+ pageNumber)

  }

}

Hope this will help you and save your time.

Enjoy !!!

Angular 6: Data Pagination using NgxPaginationModule

Here I have prepare a sample to load data in page wise.

Model



export class country{

    ID : number;

    Name : string;

}

Service



export class CountryService {

  constructor(private http:HttpClient) { }

  getCountry(pageNumber : Number): Observable<country[]> {

    return this.http.get<country[]>('http://localhost/DemoApp.API/api/CountryListPage?pageNumber='+ pageNumber)

  }

}

Component



export class DemoComponent implements OnInit {

  pagenumber : Number;

  records = { count: 227, data: [] };

  config = {

      itemsPerPage: 5,

      currentPage: 1,

      totalItems: this.records.count

    };

 

  constructor(private countryService : CountryService, private route: ActivatedRoute, private router: Router) { 

    this.router.routeReuseStrategy.shouldReuseRoute = function(){

      return false;

      } 

    route.queryParams.subscribe(

      params => this.config.currentPage= params['page']?params['page']:1 ); 

      this.pagenumber =  +this.route.snapshot.queryParamMap.get('page');

         this.countryService.getCountry(this.pagenumber).subscribe(data=>{      

      this.records.data = data; 

      this.records.count = 227;

   });

  }

  ngOnInit() {

  }

  

  pageChanged(newPage: number) {

    this.router.navigate(['demo'], { queryParams: { page: newPage } });

  }

}

HTML



<table class="table">

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">Item</th>

      </tr>

    </thead>

    <tbody>

        <tr *ngFor="let item of records.data | paginate: config">

            <th scope="row">{{item.ID}}</th>

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

          </tr>

    </tbody>

  </table>

 

  <div>

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

</div>

Hope this will help you and save your time.

Enjoy !!!

SQL : Hierarchy chain (reverse path)

Hierarchy chain (reverse path)

Create Table

 CREATE TABLE [dbo].[employee](
 [EmpName] [varchar](50) NULL,
 [EmpID] [int] NULL,
 [ManagerID] [int] NULL
) ON [PRIMARY]
GO

Insert Data

INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Saurav', 1, 0)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Dravid', 2, 1)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Kapila', 3, 2)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Pranil', 4, 2)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Rohini', 5, 4)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Peeter', 6, 0)
INSERT [dbo].[employee] ([EmpName], [EmpID], [ManagerID]) VALUES (N'Keveen', 7, 6)
GO

Create a hierarchy chain (reverse path) for specific node in a tree


;with CTE(EmpID, empName, ManagerID)
AS
(
 SELECT EmpID, empName, ManagerID 
 FROM Employee F
 WHERE EmpID = 5
 UNION ALL
 SELECT F.EmpID, F.empName, F.ManagerID  
 FROM Employee F
 INNER JOIN CTE FH ON FH.ManagerID = F.EmpID  
)
SELECT * FROM CTE

Create a hierarchy chain for specific node in a tree with all child levels

WITH empCTE
AS ( SELECT EmpID, empName, ManagerID
FROM Employee
WHERE empid = 1 -- and ManagerID = 0 
UNION ALL
SELECT e.EmpID, e.empName, e.ManagerID
FROM Employee e
INNER JOIN empCTE ON e.ManagerID = empCTE.EmpID
WHERE e.ManagerID != 0)
SELECT *
FROM empCTE

Hope this will help you and save your time.

Enjoy !!!