Microsoft.Net Developer

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 !!!

Angular 6 : Component Communication using @Input, @Output and EventEmitter

Below example is implemented to communicate parent and child component using @Input, @Output and EventEmitter.

Model class



export class country{

    ID : number;

    Name : string;

}

parent.component.ts



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

import { country } from 'src/app/Model/Country';

@Component({

  selector: 'app-parent',

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

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

})

export class ParentComponent implements OnInit { 

  name: string = "DemoName";  

  vmCountry: country; 

  receivedChildMessage: string;  

  receivedChildAnotherMessage: country;

  constructor() { }

  ngOnInit() {

    this.vmCountry = new country();

    this.receivedChildAnotherMessage = new country();

    this.vmCountry.Name = "India"; 

  }

  

  getMessage(message: string) {

    this.receivedChildMessage = message; 

  }

  getAnotherMessage(varCountry : country) { 

    this.receivedChildAnotherMessage = varCountry; 

  } 

}

parent.component.html



<h1>

  parent works! test

</h1>

<app-child [name]="name" [varCountry]="vmCountry" 

          (messageToEmit)="getMessage($event)" 

          (anotherMessageToEmit)="getAnotherMessage($event)"></app-child> 

<div class="row">

  <div class="col-md-2">

      {{receivedChildMessage}}

  </div>

  <div class="col-md-2">

      {{receivedChildAnotherMessage.Name}}

    </div>

</div>

child.component.ts



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

import { country } from 'src/app/Model/Country';

@Component({

  selector: 'app-child',

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

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

})

export class ChildComponent implements OnInit {

  @Input() name: string;

  @Input() varCountry: country;

  @Output() messageToEmit = new EventEmitter<string>();

  @Output() anotherMessageToEmit = new EventEmitter<country>();

   

  constructor() { }

  ngOnInit() {

    

  }

  sendMessageToParent(message: string) {

    this.messageToEmit.emit(message)

  }

  sendAnotherMessageToParent() {

    this.varCountry = new country;

    this.varCountry.ID = 10;

    this.varCountry.Name = "Japan";

    this.anotherMessageToEmit.emit(this.varCountry)

  }

}

child.component.html



<p>

  child works {{name}}!

</p>

<h1>{{varCountry.Name}}</h1>

<div class="row">

  <div class="col-md-2">

    <button (click)="sendMessageToParent('message from child')">Send to Parent</button>

  </div>

  <div class="col-md-2">

    <button (click)="sendAnotherMessageToParent()">Another Send to Parent </button>

  </div>

</div>

app.module.ts




@NgModule({

  declarations: [   

    ParentComponent,

    ChildComponent,

    .....

  ],

  .....

})

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Parent and Child component

Here is sample code, how to use parent and child component in angularjs 6.

Model Class

export class country{
    ID : number;
    Name : string;
}

Parent Component

parent.component.ts

  name : string = "DemoName";
  vmCountry : country;
  
  constructor() { }

  ngOnInit() {
    this.vmCountry = new country();
    this.vmCountry.Name = "India";
  }

parent.component.html

<div>
  Some html here
</div>

<app-child [name]="name" [varCountry]="vmCountry"></app-child> 

<div>
  Some html here
</div>

another action, so we can get it as below,

 "expression": {
 "and": [
  {
  "equals": [
   "@outputs('HttpStepName')['body']?['ResultCode']",
   "OK"
  ]
  }
 ]
},

Child Component

child.component.ts

  @Input() name : string;
  @Input() varCountry:country;

  constructor() { }

  ngOnInit() {
  }

child.component.html

<p>
  child works {{name}}!  
</p>
<h1>{{varCountry.Name}}</h1>

app.module.ts

@NgModule({
  declarations: [
    ....
    ParentComponent,
    ChildComponent
  ],  
  .....  
  })

Hope this will help you and save your time.

Enjoy !!!

.Net Core : Enable CORS in ASP.net Core WebAPI

Enable CORS in ASP.net Core WebAPI

In ConfigureServices method

  public void ConfigureServices(IServiceCollection services)
        { 
            services.AddCors(options => options.AddPolicy("ApiCorsPolicy", builder =>
            {
                builder.WithOrigins("http://localhost:4200").AllowAnyMethod().AllowAnyHeader();
            }));

            services.AddDbContextPool<AppDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DotNetCoreDB")));
             
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

In Configure method

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            } 
            app.UseAuthentication();

            app.UseCors(
                options => options.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials()
            );
 
            app.UseMvc();
        }

Hope this will help you and save your time.

Enjoy !!!

.Net Core : Unit Test with NUnit

Below example is implemented with Nunit test to test .net core project feature.

Create test class,

namespace DotNetCoreDemo.Test
{
    public class EmployeeServiceTest
    {
        
    }
}

OneTimeSetUp

 IEmployeeService employeeService;
        public Mock<IEmployeeRepository> mockEmployeeRepository;
        
        [OneTimeSetUp]
        public void Init()
        {
            mockEmployeeRepository = new Mock<IEmployeeRepository>();
            employeeService = new EmployeeService( this.mockEmployeeRepository.Object);
        }

Data Sources for test cases,

static object[] employeeSource =
        {
            new object[]
            {
                new Employee[]
                {
                    new Employee()
                    {
                        Id = 1, Name = "demo1", Email = "demo1@demo.com"
                    },
                    new Employee()
                    {
                        Id = 2, Name = "demo2", Email = "demo2@demo.com"
                    }
                } 
            }
        };

        static object[] employeeSourceNull =
        {
            new object[]
            {
                new Employee[]
                {
                    
                }
            }
        };

Test for get data,

 [Test, TestCaseSource("employeeSource")]
        public void GetEmployeeList_Return_True(Employee[] employees)
        {
            //Init            
            mockEmployeeRepository.Setup(p => p.GetAllEmployee()).Returns(employees.AsQueryable().ToList());
            
            //Act
            List<Employee> result  = employeeService.GetAllEmployee().ToList();

            ////Assert
            Assert.Greater(result.Count, 0);
        }

Test for no data,

[Test, TestCaseSource("employeeSourceNull")]
        public void GetEmployeeList_NoData_Return_True(Employee[] employees)
        {
            //Init            
            mockEmployeeRepository.Setup(p => p.GetAllEmployee()).Returns(employees.AsQueryable().ToList());

            //Act
            List<Employee> result = employeeService.GetAllEmployee().ToList();

            ////Assert
            Assert.AreEqual(result.Count, 0);
        }

Hope this will help you and save your time.

Enjoy !!!