How to implement the Angular switch case in Angular 5 ?


Switch case in angular is a combination of 3 directives
1. ngSwitch directive
2. ngSwitchCase directive
3. ngSwitchDefault directive

If we have display some Text Value for some key value then we can use this syntax. It is similar to C# switch statement.

Syntax for using Switch in Angular is like this

<div class="col-xs-6" [ngSwitch]="employee.department">
              : 
              <span *ngSwitchCase="1"> Help Desk </span>
              <span *ngSwitchCase="2"> HR </span>
              <span *ngSwitchCase="3"> IT </span>
              <span *ngSwitchCase="4"> Payroll </span>
              <span *ngSwitchDefault> N/A </span>
            </div>

How to implement Bootstrap and Custom CSS class in Angular 5 ?


In this post we will see how to integrate the Bootstrap css and custom css class in our application.
for this functionality we have to do the following steps

Approach 1

Step 1: Go the node command terminal and run this command

npm install bootstrap@3 –save

Step 2: Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.

“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”

]

Approach 2:

Implementing CDN file path directly on index.html or importing the path in styles.css file like this

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MySample</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>
<body>
  <app-root>Loading -----</app-root>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>



How to do confirm password validation in Angular 5


In Angular 5 doesn’t support inbuilt validation process for confirm password functionality. For this we have to create our own custom validator code.

Step 1. Create the confirm-equal-validator.directive.ts file then write the code like this



import { Validator, NG_VALIDATORS, AbstractControl } from "@angular/forms";
import { Directive } from "@angular/core";


@Directive({
    selector:'[appConfirmEqualValidator]',
    providers:[{
        provide: NG_VALIDATORS,
        useExisting: ConfirmEqualValidatorDirective,
        multi: true
    }]

})

export class ConfirmEqualValidatorDirective implements Validator {
    validate(passwordGroup: AbstractControl): { [key: string]: any } | null {
        const passwordField = passwordGroup.get('password');
        const confirmPasswordField = passwordGroup.get('confirmPassword');
        if (passwordField && confirmPasswordField &&
            passwordField.value !== confirmPasswordField.value) {
            return { 'notEqual': true };
        }

        return null;
    }
}
  

Step 2: Go to the HTML page implement the code like this

<div ngModelGroup="passwordGroup" #passwordGroup="ngModelGroup"
      appConfirmEqualValidator [class.has-error]="passwordGroup.errors?.notEqual
      && !confirmPassword.errors?.required">

  <div class="form-group"
        [class.has-error]="password.touched && password.invalid">
    <label for="password" class="control-label">Password</label>
    <input name="password" required type="text" class="form-control"
            [(ngModel)]="employee.password" #password="ngModel">
    <span class="help-block"
          *ngIf="password.touched && password.errors?.required">
      Password is required
    </span>
  </div>

  <div class="form-group"
        [class.has-error]="confirmPassword.touched && confirmPassword.invalid">
    <label for="confirmPassword" class="control-label">Confirm Password</label>
    <input name="confirmPassword" required type="text" class="form-control"
            [(ngModel)]="employee.confirmPassword" #confirmPassword="ngModel">
    <span class="help-block"
          *ngIf="confirmPassword.touched && confirmPassword.errors?.required">
      Confirm Password is required
    </span>
    <span class="help-block" *ngIf="confirmPassword.touched &&
          passwordGroup.errors?.notEqual && !confirmPassword.errors?.required">
      Password and Confirm Password does not match
    </span>
  </div>
   </div>

In the above code we show that NgModelGroup Directive use to create a sub-group within a form and it is useful to validate a sub-group of elements on the form.

Step 3: Go to the app.module.ts file import the code like this

import {ConfirmEqualValidatorDirective } from ‘./shared/confirm-equal-validator.directive’;

and in @NgModule({
ConfirmEqualValidatorDirective

})

What are the different type of Constructor in C# ?


Constructor is the special method of class that will be executed whenever we will create the object of that class.

Some points

1. Class can have any number of constructors
2. Constructor doesn’t have any return type.
3. In one class we can create one static constructor

Type of Constructor in C#

1. Default constructor
2. Static Constructor
3. Private Constructor
4. Copy Constructor
5. Parameterized constructor

Default constructor

A constructor without any parameter is called the default constructor. This type of constructor dosnot take any parameter.

Sample Code

class Test
    {
        int a, b;
         public Test()
        {
            a = 10;
            b = 60;
        }
        static void Main(string[] args)
        {
            Test obj = new Test();
            Console.WriteLine(obj.a);
            Console.WriteLine(obj.b);
            Console.Read();
        }
    }

Parameterized Constructor:

A constructor with at least one parameter is called a Parameterized constructor. The advantage of a Parameterized constructor is that you can initialize each instance of the class to different values.


 class Test
    {
        int a, b;
         public Test(int x, int y)
        {
            a = x;
            b = y;
        }
        static void Main(string[] args)
        {
            Test obj = new Test(20,30);
            Test obj1 = new Test(200, 300);
            Console.WriteLine(obj.a);
            Console.WriteLine(obj.b);
            Console.WriteLine(obj1.a);
            Console.WriteLine(obj1.b);
            Console.Read();
        }
    }

Copy Constructor :

The constructor which creates an object by copying variables from another object is called a copy constructor. The purpose of a copy constructor is to initialize a new instance to the values of an existing instance.

 class Test
    {
        private string Name;
        private string Address;
        public Test(Test objTest)
        {
            Name = objTest.Name;
            Address = objTest.Address;
        }

        public Test(string Name,string Address)
        {
            this.Name = Name;
            this.Address = Address;
        }
        public string Details
        {
            get
            {
                return "The address of " + Name + " Is " +Address.ToString();
            }
        }


        static void Main(string[] args)
        {
            Test obj = new Test("Chandradev","Bangalore");
            Test obj1 = new Test(obj);
            Console.WriteLine(obj1.Details);
            Console.Read();
        }
    }

Static Constructor:

A static constructor is used to initialize static fields of the class and to write the code that needs to be executed only once.

It will execute only once for all instances of class.

 class StaticTest
    {
        static StaticTest()
        {
            Console.WriteLine("This is the static constructor");
        }
        static void Main(string[] args)
        {
            StaticTest obj = new StaticTest();
            StaticTest obj1 = new StaticTest();
            Console.WriteLine("Hello World!");
            Console.Read();
        }
    }

Some points related with Static Constructors

1. A static constructor does not take access modifiers or have parameters.

2. A static constructor is called automatically to initialize the class before the first instance
is created or any static members are referenced.

3. A static constructor cannot be called directly.

4. The user has no control on when the static constructor is executed in the program.

5. A typical use of static constructors is when the class is using a log file and the constructor is
used to write entries to this file.

Private Constructor

>> Private constructor is used to avoid the inheritance of class and we cant create the instance of that class.
>> private constructor is a special instance constructor. It is generally used in classes that contain static members only. If a class has one or more private constructors and no public constructors, other classes (except nested classes) cannot create instances of this class.

public class StaticTest
    {
        static void Main(string[] args)
        {
            Counter.currentCount = 10;
            Counter.IncrementCount();
            Console.WriteLine("New count: {0}", Counter.currentCount);
            Console.Read();
        }
    }
    public class Counter
    {
        private Counter() { }
        public static int currentCount;
        public static int IncrementCount()
        {
            return ++currentCount;
        }
    }

Some key points of a private constructor are:

1. One use of a private constructor is when we have only static members.

2. It provides an implementation of a singleton class pattern

3. Many time we don’t want to create instance of certain classes like utility, logs or conman routine classes in this scenario we can use the private constructor.