Microsoft.Net Developer: August 2019

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

Angular 6 : "reloading" same page when navigate to same route with different param

Angular 6 : "reloading" page when navigate to same route with different params

app-routing.module.html




const routes: Routes = [

  { path: 'detail/:id', component: DetailComponent },  

] ;

detail.component.html


<button (change)="gotoDetailPage(record.ID)" >{{record.Name}}</button>

detail.component.cs



import { Router } from '@angular/router'; 



constructor(private router: Router) {

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

return false;

} 

}





ngOnInit() {      

    //To get id's value, e.g., detail/123 

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

    //To get querystring id's value, e.g., detail?id=123 

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

    console.log(id)

  }







gotoDetailPage(id)

{    

this.router.navigate(['/detail', id]);    

}

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : DevOps VSTS

Overview

Using VSTS we can make build of Angular project and deploy on server.

We need to make build and release pipeline in VSTS. Here I have explained it step by step.

Build

Release (Deployment)

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Show HTML text on UI (remove html tags on html view page)

Angular 6 : Show HTML text on UI

(remove html tags on html view page)

Issue

HTML text which contains the html tags, to show proper html view use below property.

<div id="description">{{detail.ProductDescription}}</div>

Solution


<div [innerHTML]="detail.ProductDescription"></div>

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : ngIf else

Overview

Sample code for ngIf and else

Code

Here "detail" is my data coming from API

Way 1



<div *ngIf="detail; then thenBlock else elseBlock"></div>

<ng-template #thenBlock>

  <div> 

    <h2>{{detail.Name | uppercase}}</h2>    

    <button (click)="goBack()">go back</button>

  </div>

</ng-template>

<ng-template #elseBlock>

  <h2>Detail not available !</h2>  

  <button (click)="goBack()">go back</button>

</ng-template>

Way 2



<div *ngIf="!detail">

  <h2>Detail not available !</h2>  

  <button (click)="goBack()">go back</button>

</div>

Hope this will help you and save your time.

Enjoy !!!

Angular 6 : Commands

Overview

I have listed some useful Angular 6 commands which can help to developer.

Commands

1) To create new project

ng new ProjectName --skip-tests

2) To Run Project

ng s -o or ng serve --open

3) To Install bootstrap and Jquery

npm install bootstrap@3 jquery --save

4) Configure bootstrap and jquery in project
Open angular.json file
Add below configurations in file

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

5) To Create new component

- ng g c componentName 
 
e.g., 
1) ng g c Employee/create-employee --spec=false --flat=true
 This will create "Employee" folder and create "create-employee" component
2) ng g c Aboutus --spec=false --flat=true
 This will create "Aboutus" component on "app" root folder

6) Set Routing module

open file app-routing.module.ts and set below routing path

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListEmployeesComponent } from './Employee/list-employees.component';
import { CreateEmployeeComponent } from './Employee/create-employee.component';

const routes: Routes = [
  {path: 'list', component: ListEmployeesComponent},
  {path: 'create', component: CreateEmployeeComponent},
  {path: '', redirectTo:'/list', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

7) Set header menu

open file app.component.html and write menu, below is sample code

<div class="container">
   <nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li>
   <a routerLinkActive="Active" routerLink="list">List</a>
    </li>
    <li>
   <a routerLinkActive="Active" routerLink="create">Create</a>
    </li>
  </ul>
   </nav>
   <router-outlet></router-outlet>
 </div>

Hope this will help you and save your time.

Enjoy !!!