Microsoft.Net Developer

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

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