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

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

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

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

:)

Test discovery or execution might not work for this project

Error: Test discovery or execution might not work for this project.'

Issue

Message=Test discovery or execution might not work for this project. It's recommended to reference NuGet test adapters in each test project in the solution.

 

Solution

If you are using MS Test, try installing

MSTest.TestAdapter via nuget

if you are using nunit, install

NUnit3TestAdapter latest versions via nuget.

  

After installing please restart the visual studio and then you can see the tests running.

Hope this will help you and save your time.

Enjoy !!!

:)

Why Juery post method converts into get method ?

Why Juery post method converts into get method ?

I have a jquery method with post method, and it is working fine in my local machine. 

But when I uploaded on window IIS server and tried to run it was not working. I checked in "Network" tab using inspect element, it was calling "get" method instead of "post"

Issue

function fnConfirm(model) {
    $('#myModalDelete').modal('show');
    $("#DeleteDiv").html("Are you sure you want to delete this record?");
    $("#ConfirmDeleting").click(function () {
        $.ajax({
            url: "Controller/DeleteData/" + model.id,
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: $(this).serialize(),
            success: function (data, textStatus, jQxhr) {
                $('#myModalDelete').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    });
}

  

Solution

I have changed two things,

1. set URL in lowercase
2. set type in uppercase

function fnConfirm(model) {
    $('#myModalDelete').modal('show');
    $("#DeleteDiv").html("Are you sure you want to delete this record?");
    $("#ConfirmDeleting").click(function () {
        $.ajax({
            url: "headerlinks/deletedata/" + model.id,
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            data: $(this).serialize(),
            success: function (data, textStatus, jQxhr) {
                $('#myModalDelete').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    });
}

  
Now, its working fine in Live server as well as in local machine.

Hope this will help you and save your time.

Enjoy !!!

:)