Microsoft.Net Developer: Angular6

Showing posts with label Angular6. Show all posts

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

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

Angular 6 : call API in Angular

Countrydetail class



export class CountryDetail {

    CountryId: number;

    CountryName: string;  

}

country.service.ts



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

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

import { environment } from '../../../environments/environment'; 

@Injectable()

export class CountryDetailService {

  private httpOptions = {

    headers: new HttpHeaders({

      'Content-Type': 'application/json; charset=utf-8'

    }),

  };

 

  constructor(private http: HttpClient) {

  }

  async getCountryDetail(countryId: number): Promise<CountryDetail> {

    let request = this.http.post(environment.apiUrl +  environment.countrydetailurl, { data: {CountryId: countryId} }, this.httpOptions).

      toPromise().

      then(res => {

        return res["d"] as CountryDetail;

      }).

      catch(err => {

        console.log(err);

        return null;

      });

    let result = await request;

    return result;

  }

}

country.component.ts



export class CountryComponent implements OnInit {

  spinnerService: any;

  public detail = new CountryDetail(); 

  showSpinner: boolean = true;

  constructor(private countryDetailService: CountryDetailService, private router: Router,

    private route: ActivatedRoute) {

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

      return false;

    }

  }

  async ngOnInit() {

    const productId = +this.route.snapshot.queryParamMap.get('id');

    let data = await this.countryDetailService.getCountryDetail(productId);

    this.detail = data as CountryDetail;

    this.showSpinner = false;

  }

}

country.component.html



<table>

    <tr *ngFor="let country of detail">

      <td>country.CountryName</td>

      <td><a href="/detail/country.CountryId">Detail</a></td>

    </tr>

  </table>

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Find value from existing array, Update array value

Find value from existing array, Update array value in Angular 6, here I explained step by steps.


let ProductSizes = Array<Size>();
let productSize = new Size();
 
productSize.Quantity = size.Quantity;
productSize.SizeName = size.SizeName;
productSize.sizeId = size.sizeId;
     
Check Value from existing array     
let existingSize = this.ProductSizes.find(item=> item.sizeId== sizeId);

if(existingSize != null)
{
  let sizeIndex = this.ProductSizes.indexOf(existingSize);
  this.ProductSizes[sizeIndex] = productSize;
}
else
{
 this.ProductSizes.push(productSize);
}

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Multi Language Usage

We can use multi languages in Angular 6, here I explained step by steps.

Steps, how to use it.

Step 1

Install required packages

npm install @ngx-translate/core --save
npm install ngx-translate-http-loader --save

Step 2

Configuration

Create folder "i18n" in "assets" folder
Create language specific file like., en.json, gu.json, hn.json as many you have language
And store language specific value in .json file as below

en.json

{
    "Product": {
        "ProductName": "Name",  
        "ProductPrice": "Price"        
    }
}

gu.json

{
    "Product": {
        "ProductName": "નામ",  
        "ProductPrice": "કિંમત"        
    }
}

hn.json

hn.json
{
    "Product": {
        "ProductName": "नाम",  
        "ProductPrice": "किम्मत"        
    }
}

Step 3

app.module.ts

import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClientModule, HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule, 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [RecordsService],
  bootstrap: [AppComponent]
})

Step 4

app.component.ts

import { Component, ElementRef } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
showLoadingIndicator = true;

constructor(private router : Router, private route: ActivatedRoute, private eleRef: ElementRef,public translate: TranslateService ) { 
  //language start
  const langsArray: string[] = ['en', 'gu', 'hn'];
    translate.addLangs(langsArray);
      translate.setDefaultLang('en');
      let profileLanguage = this.eleRef.nativeElement.getAttribute('language');
    const browserLang: string =  translate.getBrowserLang();
    
    let UserLanguage = localStorage.getItem('UserLanguage'); 
    if(UserLanguage != null)
    {
      translate.use(UserLanguage);
    }
    else{
      if (profileLanguage) {
        translate.use(profileLanguage);
      } else {
        translate.use(langsArray.includes(browserLang) ? browserLang : 'en');
      }
    }    
  //language end  
}

  changeLanguage(lang) : void{     
    localStorage.setItem('UserLanguage', lang);
    this.translate.use(lang);
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate([this.router.url]);
  }
}

Step 5

app.component.html

 <select #langselect (change)="changeLanguage(langselect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang">{{lang}}</option>
 </select>

Step 6

how to use language specific value

<h1>
    {{ 'Product.ProductName' | translate }}
</h1>
<h2>
    {{ 'Product.ProductPrice' | translate }}
</h2>

Hope this will help you and save your time.

Enjoy !!!