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

:)

Mock Unit Testing with Example

Mock Unit Testing with Example

Unit test cases should implement in our project, so as a developer we can assure that developed feature is working fine.

Here I have created a sample end to end.

DB Layer

//DB Layer: Database Class
public class tblUser
{
 public virtual string AddUser()
 {
  throw new NotImplementedException();
  //return "success";
 }
}

  

Business Layer

//Business Layer : Service Class
public class BLUser
{
 private readonly tblUser _BLUser;
 public BLUser(tblUser bLUser)
 {
  _BLUser = bLUser;
 }

 public string AddUser()
 {
  return _BLUser.AddUser();
 }
}

  

Implementation Layer

//Implementation Layer 
public class UserUI
{
 public string AddNew()
 {
  BLUser user = new BLUser(new tblUser());

  return user.AddUser();
 }
}

  

Test Project

//Unit Test: Test Class
[TestClass]
public class BLUserTest
{
 [TestMethod]
 public void AddUserTest()
 {
  var mockBLUser = new Mock<tblUser>();
  mockBLUser.Setup(mk => mk.AddUser()).Returns("success");
  var user = new BLUser(mockBLUser.Object);
  var actual = user.AddUser();
  Assert.AreEqual("success", actual);
 }  
}

   

Now you can do process on fileContent as per your requirement.

Hope this will help you and save your time.

Enjoy !!!

:)

How to add file in Resource file in C# ?

How to add file in Resource file in C# ?

We can add text or xml file in resource file in c# class library project.

Steps, how to use it.

 

Steps

1. Right click on project and select properties
2. Click on Resources option from left side
3. Click on link available in middle of the section, link as "This project does not contain a default resource file. Click here to create one."
4. Click on "Add Resource" from section menu and select "Add Existing File"
5. Select file from your file path
6. File is added in resource file
7. You can rename file name as per your requirement

  

Code

How to use file content in C# program

Add namespace 

using projectNameSpace.Properties;

byte[] file = Resources.FileName;
Stream stream = new MemoryStream(file);
string fileContent = "";

using (StreamReader reader = new StreamReader(stream))
{
     fileContent = reader.ReadToEnd();
}

  
Now you can do process on fileContent as per your requirement.

Hope this will help you and save your time.

Enjoy !!!

:)

Error: Inheritance security rules violated by type: 'System.Net.Http.WebRequestHandler'

Error: Inheritance security rules violated by type: 'System.Net.Http.WebRequestHandler'

Issue

Message=Inheritance security rules violated by type: 'System.Net.Http.WebRequestHandler'. Derived types must either match the security accessibility of the base type or be less accessible.

Source=Microsoft.Rest.ClientRuntime

Solution

I have updated nuget package "System.Net.Http" to version 4.3.1 with NuGet and that solved the issue.

  

Hope this will help you and save your time.

Enjoy !!!

:)