DevXperts - Expert's Voice in Programming

$emit, $broadcast, $on – Part2

July 10, 2018July 10, 2018 admin847785456 1 Comment

$emit: It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$broadcast: It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$on: It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.

<body ng-app="myApp">

   <div ng-controller="parentController1" style="border:2px solid #fed844; padding:5px;">

       <p>{{parentmessage}}</p>

       <div ng-controller="parentController2" style="border:2px solid #fed844; padding:5px;">

           <p>{{parentmessage}}</p>

           <div ng-controller="myController" style="border:2px solid #000000;padding:5px;">

               <p> <button ng-click="EmitMessage()">Emit Message</button> <button ng-click="BroadcastMessage()">Broadcast Message</button></p>

               <div ng-controller="childController1" style="border:2px solid #428bca;padding:5px;">

                   <p>{{childmessage}}</p>

                   <div ng-controller="childController2" style="border:2px solid #428bca;padding:5px;">

                       <p>{{childmessage}}</p>

                   </div>

               </div>               

           </div>

       </div>

   </div>

</body>

<p>{{parentmessage}}</p>

<p>{{parentmessage}}</p>

<p> <button ng-click="EmitMessage()">Emit Message</button> <button ng-click="BroadcastMessage()">Broadcast Message</button></p>

<p>{{childmessage}}</p>

<p>{{childmessage}}</p>

</div>

</body>

And now creating the script, here myController is the controller which is going to emit/broadcast an event with some arguments.
parentController1, parentController2 will listen to event which is dispatched from myController by $broadcast.
childController1, childController2 will listen to event which is dispatched from myController by $emit.

<script>

    var app = angular.module("myApp", []);

    app.controller("parentController1", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.parentmessage = args.mymessage + " to Parent Controller-1";

        });

    }])

    app.controller("parentController2", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.parentmessage = args.mymessage + " to Parent Controller-2";

        });

    }])

    app.controller("myController", ["$scope", function ($scope) {

        $scope.EmitMessage = function () {

            $scope.$emit("myEvent", {mymessage:"Emitted message"});

        };

        $scope.BroadcastMessage = function () {

            $scope.$broadcast("myEvent", { mymessage: "Broadcasted message" });

        };

    }])

    app.controller("childController1", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.childmessage = args.mymessage+" to Child Controller-1";

        });

    }])

    app.controller("childController2", ["$scope", function ($scope) {

        $scope.$on("myEvent", function (event, args) {

            $scope.childmessage = args.mymessage + " to Child Controller-2";

        });

    }])

</script>

var app = angular.module("myApp", []);

app.controller("parentController1", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.parentmessage = args.mymessage + " to Parent Controller-1";

});

}])

app.controller("parentController2", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.parentmessage = args.mymessage + " to Parent Controller-2";

});

}])

app.controller("myController", ["$scope", function ($scope) {

$scope.EmitMessage = function () {

$scope.$emit("myEvent", {mymessage:"Emitted message"});

};

$scope.BroadcastMessage = function () {

$scope.$broadcast("myEvent", { mymessage: "Broadcasted message" });

};

}])

app.controller("childController1", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.childmessage = args.mymessage+" to Child Controller-1";

});

}])

app.controller("childController2", ["$scope", function ($scope) {

$scope.$on("myEvent", function (event, args) {

$scope.childmessage = args.mymessage + " to Child Controller-2";

});

}])

</script>

output

In this example we have used $scope context to $emit/$broadcast the events, and $on has listened all the events by using $scope.$on().
Now if we have used $rootscrope context to $emit/$broadcast, it will not work same as that works with $scope.
Because $rootscope is the parent scope and it doesn’t have any parent, when we emit using $rootscope.$emit(), only $rootscope.$on() can listen to that events. Whereas when we broadcast using $rootscope.$broadcast(), all the $rootscope.$on() and $scope.$on() can listen to that event.

Cancelling Events:

Canelling event is possible when event is emitted, but we cannont cancel the event when it is broadcasted.

If the event is dispatched by using $scope.$emit( ) then any of the $rootscope/$scope listeners can cacel it.
If the event is dispatched by using $rootscope.$emit() then any of the $rootscope listeners can cancel it.

$scope.$on("myEvent", function (event, args) {

            event.stopPropagation();   
        
});

$scope.$on("myEvent", function (event, args) {

event.stopPropagation();

});

$rootscope.$on("myEvent", function (event, args) {

            event.stopPropagation();   
         
});

$rootscope.$on("myEvent", function (event, args) {

event.stopPropagation();

});

$emit, $broadcast, $on – Part1

$emit, $broadcast, $on – Part1

July 6, 2018July 10, 2018 admin847785456 1 Comment

How to use $rootScope:

As we know that $rootScope is the parent for $scope, to override the $rootScope we need to re-initialize the $rootScope variable with $scope

Let us see an example

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>   

</head>

<body ng-app="myApp">

    <div ng-controller="parentController">

     This is parent - {{empName}}

        <div ng-controller="childController">

         This is child - {{empName}}

        </div>

    </div>

</body>

</html>

<script>
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope, $rootScope) {

        $rootScope.empName = "John Smith";

    })

    app.controller("childController", function ($scope, $rootScope) {
      
    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{empName}}

This is child - {{empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope, $rootScope) {

$rootScope.empName = "John Smith";

})

app.controller("childController", function ($scope, $rootScope) {

})

</script>

In this example we have injected $rootScope in both parent and child controllers.

As $rootScope variables will be available throughout the application we can now access the $rootScope variable anywhere in the application by just injecting the $rootScope

Output:

Now if we remove the $rootScope from Parent and initialize it in child controller, it works same.

<script>
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope, $rootScope) {

    })

    app.controller("childController", function ($scope, $rootScope) {

         $rootScope.empName = "John Smith";
    })

</script>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope, $rootScope) {

})

app.controller("childController", function ($scope, $rootScope) {

$rootScope.empName = "John Smith";

})

</script>

Output:

How to pass data from parent controller to child

To pass the data from Parent Controller to Child, we need to extract parent controller $scope variable using $parent.

Example: In this example we will use only $scope.

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>  
 
</head>

<body ng-app="myApp">

<div ng-controller="parentController">

    This is parent - {{empName}}

      <div ng-controller="childController">

         This is child - {{$parent.empName}}

      </div>

 </div>

</body>

</html>

<script>  
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope) {

        $scope.empName = "John Smith";

    })
    app.controller("childController", function ($scope) {
       
    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{empName}}

This is child - {{$parent.empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope) {

$scope.empName = "John Smith";

})

app.controller("childController", function ($scope) {

})

</script>

How to pass data from child controller to parent

To pass data from child to parent controllers using $scope we don’t have $child to take from child controller. But here I’ll show you one of the possible way to transfer data.

<!DOCTYPE html>

<html>

<head>

    <title>Broadcasting</title>

    <script src="/Scripts/angular.js"></script>   

</head>

<body ng-app="myApp">

    <div ng-controller="parentController">

        This is parent - {{employee.empName}}

        <div ng-controller="childController">

            This is child - {{employee.empName}}

        </div>

    </div>

</body>

</html>

<script>  
   var app = angular.module("myApp", []);

    app.controller("parentController", function ($scope) {

        $scope.employee = {};

    })
    app.controller("childController", function ($scope) {

       $scope.employee.empName = "John Smith";

    })
</script>

<!DOCTYPE html>

<html>

<head>

<title>Broadcasting</title>

</head>

This is parent - {{employee.empName}}

This is child - {{employee.empName}}

</div>

</body>

</html>

var app = angular.module("myApp", []);

app.controller("parentController", function ($scope) {

$scope.employee = {};

})

app.controller("childController", function ($scope) {

$scope.employee.empName = "John Smith";

})

</script>

In child controller initialize the empName in an object as $scope.employee.empName.
In parent controller declare an empty object naming with same object as $scope.employee = {}

Output:

$emit, $broadcast, $on – Part2

Automation Test Life Cycle

July 3, 2018July 4, 2018 admin847785456 1 Comment

Once you start automating test script you will get this work often. We talk about life cycle it mean end to end picture of that scenario, like we have a life cycle for development, for manual testing similarly we have in Automation as well. Today in this post we will discuss Automation test life cycle in short ATLC.

You all must be familiar with SDLC ( Software development life cycle ), STLC ( Software test life cycle ), so lets discuss ATLC ( Automation test life cycle ).

Please refer below image is the ATLC (Automation test life cycle diagram)

Automation test life cycle has 6 section

1- Automation feasibility analysis

2- Test Plan/Test Design

3- Environment Setup/Test lab setup

4-Test Script development/ Automation test case development

5-Test script execution

6- Generate test result / Analyses of result

Lets start each of the phase of Automation test life cycle

1- Automation feasibility analysis

The main objective of this phase will be to check feasibility of automation.
Which test case can be automated and how we can automate them.
Which module of your application can be tested and which can not be automated
Which tools we can use for our application (like Selenium, QTP, Sahi, OATS, Telrik etc) and which tools will be best of our application
Take following factors into consideration like Team size, Effort and cost involved for tools which we will use.

2- Test Plan/Test Design

In this phase you have to create a Test plan by considering below point into considerations.
Fetch all the manual test case from test management tool that which TC has to automate.
Which framework to use and what will be advantage and disadvantage of the framework which we will use.
Create a test suite for Automation test case in Test Management tool.
In test plan you can mention background, limitation, risk and dependency between application and tools.
Approval from client/ Stack holders.

3- Environment Setup/Test lab setup

By name itself you can understand that we need to setup machine or remote machine where our test case will execute.

In this section you can mention how many machine you want.
What should be the configuration in terms of hardware and software

4- Test Script development/ Automation test case development

In this phase you have to start develop automation script and make sure all test script is running fine and should be stable enough.

Start creating test script based on your requirement
Create some common method or function that you can reuse throughout your script
Make your script easy, reusable,well structured and well documented so if third person check your script then he/she can understand your scripts easily.
Use better reporting so in case of failing you can trace your code
Finally review your script and your script should be ready before consumption.

5 – Test script execution
Now its time for execution of test scripts, in this phase you have to execute all your test script.
Some points to remember while execution

Your script should cover all the functional requirement as per test case.
Your script should be stable so it should run in multiple environment and multiple browsers (depends on your requirement)
You can do batch execution also if possible so it will save time and effort.
In case of failure your script should take screen shots.
If test case is failing due to functionality, you have to raise a bug/defect.

6- Generate test result / Analyses of result

This is the last phase of Automation test life cycle in which we will gather test result and will share with team/client/stack holders.

Analyze the output and calculate how much time it take to complete the testcase.
You should have good report generation like XSLT report, TestNG report, ReporterNG etc.

Selenium Interview Questions

June 27, 2018June 27, 2018 admin847785456 Leave a comment

What is Automation Testing?

Automation testing or Test Automation is a process of automating the manual process to test the application/system under test. Automation testing involves the use of a separate testing tool which lets you create test scripts which can be executed repeatedly and doesn’t require any manual intervention.

What are the benefits of Automation Testing?

Benefits of Automation testing are:

Supports execution of repeated test cases
Aids in testing a large test matrix
Enables parallel execution
Encourages unattended execution
Improves accuracy thereby reducing human-generated errors
Saves time and money

Why should Selenium be selected as a test tool?

Selenium

is a free and open source
have a large user base and helping communities
have cross Browser compatibility (Firefox, Chrome, Internet Explorer, Safari etc.)
have great platform compatibility (Windows, Mac OS, Linux etc.)
supports multiple programming languages (Java, C#, Ruby, Python, Pearl etc.)
has fresh and regular repository developments
supports distributed testing

What is Selenium? What are the different Selenium components?

Selenium is one of the most popular automated testing suites. Selenium is designed in a way to support and encourage automation testing of functional aspects of web-based applications and a wide range of browsers and platforms. Due to its existence in the open source community, it has become one of the most accepted tools amongst the testing professionals.

Selenium is not just a single tool or a utility, rather a package of several testing tools and for the same reason, it is referred to as a Suite. Each of these tools is designed to cater different testing and test environment requirements.

The suite package constitutes of the following sets of tools:

Selenium Integrated Development Environment (IDE) – Selenium IDE is a record and playback tool. It is distributed as a Firefox Plugin.
Selenium Remote Control (RC) – Selenium RC is a server that allows a user to create test scripts in the desired programming language. It also allows executing test scripts within the large spectrum of browsers.
Selenium WebDriver – WebDriver is a different tool altogether that has various advantages over Selenium RC. WebDriver directly communicates with the web browser and uses its native compatibility to automate.
Selenium Grid – Selenium Grid is used to distribute your test execution on multiple platforms and environments concurrently.

What are the testing types that can be supported by Selenium?

Selenium supports the following types of testing:

Functional Testing
Regression Testing

What are the limitations of Selenium?

Following are the limitations of Selenium:

Selenium supports testing of only web-based applications
Mobile applications cannot be tested using Selenium
Captcha and Barcode readers cannot be tested using Selenium
Reports can only be generated using third-party tools like TestNG or JUnit.
As Selenium is a free tool, thus there is no ready vendor support through the user can find numerous helping communities.
The user is expected to possess prior programming language knowledge.

When should I use Selenium IDE?

Selenium IDE is the simplest and easiest of all the tools within the Selenium Package. Its record and playback feature make it exceptionally easy to learn with minimal acquaintances to any programming language. Selenium IDE is an ideal tool for a naïve user.

What are the different types of locators in Selenium?

The locator can be termed as an address that identifies a web element uniquely within the webpage. Thus, to identify web elements accurately and precisely we have different types of locators in Selenium:

ID
ClassName
Name
TagName
LinkText
PartialLinkText
Xpath
CSS Selector

What is the difference between assert and verify commands?

Assert: Assert command checks whether the given condition is true or false. Let’s say we assert whether the given element is present on the web page or not. If the condition is true then the program control will execute the next test step but if the condition is false, the execution would stop and no further test would be executed.

Verify: Verify command also checks whether the given condition is true or false. Irrespective of the condition being true or false, the program execution doesn’t halt i.e. any failure during verification would not stop the execution and all the test steps would be executed.

What is an XPath?

XPath is used to locate a web element based on its XML path. XML stands for Extensible Markup Language and is used to store, organize and transport arbitrary data. It stores data in a key-value pair which is very much similar to HTML tags. Both being markup languages and since they fall under the same umbrella, XPath can be used to locate HTML elements.

The fundamental behind locating elements using XPath is the traversing between various elements across the entire page and thus enabling a user to find an element with the reference of another element.

What is the difference between “/” and “//” in Xpath?

Single Slash “/” – Single slash is used to create Xpath with absolute path i.e. the xpath would be created to start selection from the document node/start node.

Double Slash “//” – Double slash is used to create Xpath with relative path i.e. the xpath would be created to start selection from anywhere within the document.

When should I use Selenium Grid?

Selenium Grid can be used to execute same or different test scripts on multiple platforms and browsers concurrently so as to achieve distributed test execution, testing under different environments and saving execution time remarkably.

How do I launch the browser using WebDriver?

The following syntax can be used to launch Browser:

WebDriver driver = new FirefoxDriver();

WebDriver driver = new ChromeDriver();

WebDriver driver = new InternetExplorerDriver();

WebDriver driver = new FirefoxDriver();

WebDriver driver = new ChromeDriver();

WebDriver driver = new InternetExplorerDriver();

What is a framework?

The framework is a constructive blend of various guidelines, coding standards, concepts, processes, practices, project hierarchies, modularity, reporting mechanism, test data injections etc. to pillar automation testing.

What are the advantages of Automation framework?

The advantage of Test Automation framework

Reusability of code
Maximum coverage
Recovery scenario
Low-cost maintenance
Minimal manual intervention
Easy Reporting

Java Interview Questions:

Difference between Overloading and over riding

Method over Loading:

Method Overloading is performed with in Class
In Case of method overloading, Parameter is deferent
Return type can be same or different in method overloading. But you must have to change the parameter.

Example:

class Sum

{

    int add(int n1, int n2) 
    {
        return n1+n2;
    }

    int add(int n1, int n2, int n3) 
    {
        return n1+n2+n3;
    }

    int add(int n1, int n2, int n3, int n4) 
    {
        return n1+n2+n3+n4;
    }

    int add(int n1, int n2, int n3, int n4, int n5) 
    {
        return n1+n2+n3+n4+n5;
    }

    public static void main(String args[])
    {

    	Sum obj = new Sum();

    	System.out.println("Sum of two numbers: "+obj.add(20, 21));

    	System.out.println("Sum of three numbers: "+obj.add(20, 21, 22));

    	System.out.println("Sum of four numbers: "+obj.add(20, 21, 22, 23));

    	System.out.println("Sum of five numbers: "+obj.add(20, 21, 22, 23, 24));

    }
}

class Sum

{

int add(int n1, int n2)

{

return n1+n2;

}

int add(int n1, int n2, int n3)

{

return n1+n2+n3;

}

int add(int n1, int n2, int n3, int n4)

{

return n1+n2+n3+n4;

}

int add(int n1, int n2, int n3, int n4, int n5)

{

return n1+n2+n3+n4+n5;

}

public static void main(String args[])

{

Sum obj = new Sum();

System.out.println("Sum of two numbers: "+obj.add(20, 21));

System.out.println("Sum of three numbers: "+obj.add(20, 21, 22));

System.out.println("Sum of four numbers: "+obj.add(20, 21, 22, 23));

System.out.println("Sum of five numbers: "+obj.add(20, 21, 22, 23, 24));

}

Method overriding:

Method overriding occurs in two Classes that have Is-A (inheritance) relationships.
In Case of method overriding, parameter must be same.
Return Type must be same

Example:

class CarClass
{
    public int speedLimit() 
    {
        return 100;
    }
}

class Ford extends CarClass
{
    public int speedLimit()
    {
        return 150;
    }

    public static void main(String args[])
    {
    	CarClass obj = new Ford();

    	int num= obj.speedLimit();

    	System.out.println("Speed Limit is: "+num);
    }
}

class CarClass

{

public int speedLimit()

{

return 100;

}

class Ford extends CarClass

{

public int speedLimit()

{

return 150;

}

public static void main(String args[])

{

CarClass obj = new Ford();

int num= obj.speedLimit();

System.out.println("Speed Limit is: "+num);

}

Importance of Finally?

Finally block that used to execute important code such as closing connection, stream etc

Example:

class TestFinallyBlock
{  

  public static void main(String args[]){ 
 
  try
  {  

   int data=25/5; 
 
   System.out.println(data);  

  }  
  catch(NullPointerException e)
  {
    System.out.println(e);
  }  
  finally
  {
    System.out.println("finally block is always executed");
  }  

  System.out.println("rest of the code...");  

  }  

}

class TestFinallyBlock

{

public static void main(String args[]){

try

{

int data=25/5;

System.out.println(data);

}

catch(NullPointerException e)

{

System.out.println(e);

}

finally

{

System.out.println("finally block is always executed");

}

System.out.println("rest of the code...");

}

Difference between public, private, protect?

            | Class | Package | Subclass | Subclass | World
            |       |         |(same pkg)|(diff pkg)| 
————————————+———————+—————————+——————————+——————————+————————
public      |   +   |    +    |    +     |     +    |   +     
————————————+———————+—————————+——————————+——————————+————————
protected   |   +   |    +    |    +     |     +    |         
————————————+———————+—————————+——————————+——————————+————————
no modifier |   +   |    +    |    +     |          |    
————————————+———————+—————————+——————————+——————————+————————
private     |   +   |         |          |          |    

+: accessible
Blank: not accessible

————————————+———————+—————————+——————————+——————————+————————

public | + | + | + | + | +

————————————+———————+—————————+——————————+——————————+————————

protected | + | + | + | + |

————————————+———————+—————————+——————————+——————————+————————

no modifier | + | + | + | |

————————————+———————+—————————+——————————+——————————+————————

private | + | | | |

+: accessible

Blank: not accessible

Xamarin.Forms CarouselView with image indicators

June 5, 2018June 16, 2018 admin847785456 3 Comments

Download source code

Most of us when we are very familiar with Bootstrap carousel, we expect the same output in mobile CarouselView either. But the problem with Xamarin.Form CarouselView doesn’t provide us such CarouselView with Image Indicators.

So this article will help the crazy professionals

Step1: Create a Mobile App (Xamarin.forms) project

Open Visual Studio 2017 File New Project Choose Cross-Platform template choose Mobile App (Xamarin.Forms) Name it as CarouselViewApp Click on OK choose .Net Standard Click OK

Step2: Install CarouselView NuGet Package

Right click on CarouselViewApp Manage NuGet Packages type CarouselView.FormsPlugin and Install the package

Step3: Create a Model for Images as ImageModel.cs

Before that add the images in CarouselViewApp.Android Resource drawable

File: ImageModel.cs

using System;
using System.Collections.Generic;
using System.Text;

namespace CarouselViewApp
{
    public class ImageModel
    {
        public string Name { get; set; }
        public string FullPath { get; set; }

        public List<ImageModel> GetData()
        {
            return new List<ImageModel>() {
           new ImageModel() { Name = "one", FullPath = "one.jpg" },
           new ImageModel() { Name = "two", FullPath = "two.jpeg" },
           new ImageModel() { Name = "three", FullPath = "three.jpeg" },
           new ImageModel() { Name = "four", FullPath = "four.jpg" },
           new ImageModel() { Name = "five", FullPath = "five.jpg" },
           new ImageModel() { Name = "six", FullPath = "six.jpg" },
           new ImageModel() { Name = "seven", FullPath = "seven.jpg" }
            };
        }

    }
}

using System;

using System.Collections.Generic;

using System.Text;

namespace CarouselViewApp

{

public class ImageModel

{

public string Name { get; set; }

public string FullPath { get; set; }

public List<ImageModel> GetData()

{

return new List<ImageModel>() {

new ImageModel() { Name = "one", FullPath = "one.jpg" },

new ImageModel() { Name = "two", FullPath = "two.jpeg" },

new ImageModel() { Name = "three", FullPath = "three.jpeg" },

new ImageModel() { Name = "four", FullPath = "four.jpg" },

new ImageModel() { Name = "five", FullPath = "five.jpg" },

new ImageModel() { Name = "six", FullPath = "six.jpg" },

new ImageModel() { Name = "seven", FullPath = "seven.jpg" }

};

}

Step4: Create ViewModel for MainPage.xaml

Right click on CarouselViewApp Add NewItem Visual C# Add new class MainPageViewModel.cs

File: MainPageViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace CarouselViewApp
{
   public class MainPageViewModel:INotifyPropertyChanged
    {
        private List<ImageModel> _lstImage;

        private int _position;

        //binding models
        public List<ImageModel> lstImage { get => _lstImage; set { _lstImage = value;onPropertyChanged(); } }

        public int position { get => _position; set { _position = value; onPropertyChanged(); } }

	//overriding onPropertyChanged from INotifyPropertyChanged interface
        public event PropertyChangedEventHandler PropertyChanged;

        void onPropertyChanged([CallerMemberName]string propertyName = "") =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

	//constructor
        public MainPageViewModel() {

            position = 0;

            img_clicked = new Command(ImageClicked);

            lstImage = new ImageModel().GetData();

        }

	
        public ICommand img_clicked { get; }

        //command click event for Image
        public void ImageClicked(object image)
        {
            var path = (image as Xamarin.Forms.Image).Source.ToString().Split(':')[1].Trim();

            position = lstImage.IndexOf(lstImage.Find(x => x.FullPath == path));
        }
    }
}

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Runtime.CompilerServices;

using System.Text;

using System.Windows.Input;

using Xamarin.Forms;

namespace CarouselViewApp

{

public class MainPageViewModel:INotifyPropertyChanged

{

private List<ImageModel> _lstImage;

private int _position;

//binding models

public List<ImageModel> lstImage { get => _lstImage; set { _lstImage = value;onPropertyChanged(); } }

public int position { get => _position; set { _position = value; onPropertyChanged(); } }

//overriding onPropertyChanged from INotifyPropertyChanged interface

public event PropertyChangedEventHandler PropertyChanged;

void onPropertyChanged([CallerMemberName]string propertyName = "") =>

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

//constructor

public MainPageViewModel() {

position = 0;

img_clicked = new Command(ImageClicked);

lstImage = new ImageModel().GetData();

}

public ICommand img_clicked { get; }

//command click event for Image

public void ImageClicked(object image)

{

var path = (image as Xamarin.Forms.Image).Source.ToString().Split(':')[1].Trim();

position = lstImage.IndexOf(lstImage.Find(x => x.FullPath == path));

}

Step5: Adding namespace in the MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CarouselViewApp"
             x:Class="CarouselViewApp.MainPage"
             xmlns:forms="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:CarouselViewApp"

x:Class="CarouselViewApp.MainPage"

xmlns:forms="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">

Step6: Assign BindingContext for MainPage.xaml.cs

File: MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace CarouselViewApp
{
	public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();

                        BindingContext = new MainPageViewModel();
		}
	}
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace CarouselViewApp

{

public partial class MainPage : ContentPage

{

public MainPage()

{

InitializeComponent();

BindingContext = new MainPageViewModel();

}

Step7: Creating UI for MainPage.xaml

File: MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CarouselViewApp"
             x:Class="CarouselViewApp.MainPage"
             xmlns:forms="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">

    <StackLayout>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="60"/>

            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>

        <!--Carousel View-->
        <AbsoluteLayout HeightRequest="300" Grid.Row="0">

            <forms:CarouselViewControl ItemsSource="{Binding lstImage}" Position="{Binding position}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                <forms:CarouselViewControl.ItemTemplate>

                    <DataTemplate>

                        <Image Source="{Binding FullPath}" AbsoluteLayout.LayoutBounds="0,0,1,300" AbsoluteLayout.LayoutFlags="WidthProportional" Aspect="Fill"/>

                    </DataTemplate>

                </forms:CarouselViewControl.ItemTemplate>

            </forms:CarouselViewControl>

        </AbsoluteLayout>

        
        <!--Indicators-->
        <RelativeLayout Grid.Row="1" 
							HeightRequest="100"
							VerticalOptions="Start">
            <ListView Rotation="270" ItemsSource="{Binding lstImage}" RowHeight="100" SeparatorVisibility="None"
                              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"
                              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=50}"
                              RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=100}"
                              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                              CachingStrategy="RecycleElement" x:Name="reqImage">
                <ListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <ContentView  Rotation="90" BackgroundColor="Transparent" Margin="0,0,5,0">

                                <AbsoluteLayout HeightRequest="60">

                                    <Image Source="{Binding FullPath}" AbsoluteLayout.LayoutBounds="0,0,1,60" AbsoluteLayout.LayoutFlags="WidthProportional" Aspect="Fill"  x:Name="img">

                                        <Image.GestureRecognizers>

                                            <TapGestureRecognizer Command="{Binding img_clicked}" CommandParameter="{x:Reference img}" BindingContext="{Binding Source={x:Reference reqImage}, Path=BindingContext}"/>

                                        </Image.GestureRecognizers>

                                    </Image>

                                </AbsoluteLayout>

                            </ContentView>

                        </ViewCell>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </RelativeLayout>

    </StackLayout>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:CarouselViewApp"

x:Class="CarouselViewApp.MainPage"

xmlns:forms="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

<forms:CarouselViewControl ItemsSource="{Binding lstImage}" Position="{Binding position}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

<forms:CarouselViewControl.ItemTemplate>

</DataTemplate>

</forms:CarouselViewControl.ItemTemplate>

</forms:CarouselViewControl>

</AbsoluteLayout>

<RelativeLayout Grid.Row="1"

HeightRequest="100"

VerticalOptions="Start">

<ListView Rotation="270" ItemsSource="{Binding lstImage}" RowHeight="100" SeparatorVisibility="None"

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"

RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=50}"

RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=100}"

RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"

CachingStrategy="RecycleElement" x:Name="reqImage">

<ListView.ItemTemplate>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

</AbsoluteLayout>

</ContentView>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</RelativeLayout>

</StackLayout>

</ContentPage>

By using Image.GestureRecognizers, we are firing click events using MVVM Architecture
Rotation property for ListView helps us to set or get the current rotation of the element. Here we are rotating ListView to 270 deg
Here the indicators row in Grid is build using RelativeLayout.
RelativeLayout is used here to turn the ListView in Horizontal Direction
1. At first we move ListView into RelativeLayout, and maintaining the RelativeLayout HeightRequest.
2. Now we need to fit the ListView in RelativeLayout bounds, this we can do it by using RelativeLayout Constraints.
3. RelativeLayout.XConstraint, RelativeLayout.YContraint are used to fix the x,y positions. And then RelativeLayout.WidthConstraint is to set the width for image, RelativeLayout.HeightContraint is to set the height for image.
4. And the final step is to rotate the ContentView. This will first rotate the cell and the fit image into it.

output: Now run the application

Authentication and Authorization in ASP.NET Web API using Custom Filters

May 23, 2018May 23, 2018 admin847785456 4 Comments

Web API is a platform for building RESTful applications on DotNet Framework.
These API’s can be consumed from Console, Windows, Web, Mobile Applications.
As Web API is a part of core ASP.NET, it can be created on either MVC applications, or any other web applications.
Web API’s uses all the HTTP features like Request and Response headers, caching and so on…
Web API’s can return the data in various formats like
- string format
- Json format
- XML format
- BSON format

Step 1: Create a ASP.NET Web API application

Open Visual Studio –> File –> New –> Project –> choose template Web –> click on ASP.NET Web Application and provide name of the application–> choose Web API from the below check boxes –> Click OK

Step 2: Create a Model and inherit GenericIdentity from Security.Principal assembly

File: UserModel.cs

public class UserModel : GenericIdentity
    {
        /// <summary>
        /// Get/Set for password
        /// </summary>
        public string Password { get; set; }
        /// <summary>
        /// Get/Set for UserName
        /// </summary>
        public string UserName { get; set; }       

        /// <summary>
        /// Basic Authentication Identity Constructor
        /// </summary>
        /// <param name="userName"></param>
        /// <param name="password"></param>
        public UserModel(string userName, string password)
            : base(userName, "Basic")
        {
            Password = password;
            UserName = userName;
        }
    }

public class UserModel : GenericIdentity

{

/// <summary>

/// Get/Set for password

/// </summary>

public string Password { get; set; }

/// <summary>

/// Get/Set for UserName

/// </summary>

public string UserName { get; set; }

/// <summary>

/// Basic Authentication Identity Constructor

/// </summary>

/// <param name="userName"></param>

/// <param name="password"></param>

public UserModel(string userName, string password)

: base(userName, "Basic")

{

Password = password;

UserName = userName;

}

Step 3: Now add a new class for Creating custom filter as MyAuthorization and inherit AuthorizationFilterAttribute and add the following assemblies MyAuthorization class.

File: MyAuthorization.cs

using System.Web.Http.Controllers;
using System.Web.Http.Filters;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

using System.Web.Http.Controllers;

using System.Web.Http.Filters;

using System.Web.Mvc;

using System.Web.Mvc.Filters;

Step 4: Here is your CustomAuthorization Filter MyAutorization

public class MyAuthorization : AuthorizationFilterAttribute
    {
        public override void OnAuthorization(HttpActionContext actionContext)
        {
            UserModel identity = FetchAuthHeader(actionContext);

           // After fetching identity here you can verify these credential from your database. 
           // If credential are not valid add response in the action Context with 
           // StatusCode as Unauthorized. 

            if (identity == null)
            {
                var dnsHost = actionContext.Request.RequestUri.DnsSafeHost;

                actionContext.Response = 
        new System.Net.Http.HttpResponseMessage() { StatusCode = HttpStatusCode.Unauthorized };
                
                actionContext.Response.Headers.Add("WWW-Authenticate", string.Format("Authorization realm=\"{0}\"", dnsHost));
                
                return;
            }           
            base.OnAuthorization(actionContext);
        }

        /// <summary>
        /// This method is used for fetching credentials from the HttpClient Header.
        /// </summary>
        /// <param name="filterContext"></param>
        /// <returns>UserModel</returns>
        protected virtual UserModel FetchAuthHeader(HttpActionContext filterContext)
        {
            string authHeaderValue = null;

            var authRequest = filterContext.Request.Headers.Authorization;

            if (authRequest != null && !String.IsNullOrEmpty(authRequest.Scheme) && authRequest.Scheme == "Authorization")
                authHeaderValue = authRequest.Parameter;

            if (string.IsNullOrEmpty(authHeaderValue))
                return null;

            authHeaderValue = Encoding.Default.GetString(Convert.FromBase64String(authHeaderValue));

            var credentials = authHeaderValue.Split(':');

            return credentials.Length < 2 ? null : new UserModel(credentials[0], credentials[1]);

        }
}

public class MyAuthorization : AuthorizationFilterAttribute

{

public override void OnAuthorization(HttpActionContext actionContext)

{

UserModel identity = FetchAuthHeader(actionContext);

// After fetching identity here you can verify these credential from your database.

// If credential are not valid add response in the action Context with

// StatusCode as Unauthorized.

if (identity == null)

{

var dnsHost = actionContext.Request.RequestUri.DnsSafeHost;

actionContext.Response =

new System.Net.Http.HttpResponseMessage() { StatusCode = HttpStatusCode.Unauthorized };

actionContext.Response.Headers.Add("WWW-Authenticate", string.Format("Authorization realm=\"{0}\"", dnsHost));

return;

}

base.OnAuthorization(actionContext);

}

/// <summary>

/// This method is used for fetching credentials from the HttpClient Header.

/// </summary>

/// <param name="filterContext"></param>

/// <returns>UserModel</returns>

protected virtual UserModel FetchAuthHeader(HttpActionContext filterContext)

{

string authHeaderValue = null;

var authRequest = filterContext.Request.Headers.Authorization;

if (authRequest != null && !String.IsNullOrEmpty(authRequest.Scheme) && authRequest.Scheme == "Authorization")

authHeaderValue = authRequest.Parameter;

if (string.IsNullOrEmpty(authHeaderValue))

return null;

authHeaderValue = Encoding.Default.GetString(Convert.FromBase64String(authHeaderValue));

var credentials = authHeaderValue.Split(':');

return credentials.Length < 2 ? null : new UserModel(credentials[0], credentials[1]);

}

Step 5: Now create an API Controller and add your custom filter. Here I’m adding for only one method for testing you can add it for the entire class or add it globally.

File: Global.asax

Add the below line in Application_Start( ), this registers our custom Filter for the entire application.

GlobalConfiguration.Configuration.Filters.Add(new MyAuthorization ());

1	GlobalConfiguration.Configuration.Filters.Add(new MyAuthorization ());

File: EmployeeAPIController.cs

public class EmployeeAPIController : ApiController
    {
       [MyAuthorization]
        // GET api/EmployeeAPI
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/EmployeeAPI/5
        public string Get(int id)
        {
            return "value";
        }

        // POST EmployeeAPI /values
        public void Post([FromBody]string value)
        {
        }

        // PUT api/ EmployeeAPI /5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/ EmployeeAPI /5
        public void Delete(int id)
        {
        }
    }

public class EmployeeAPIController : ApiController

{

[MyAuthorization]

// GET api/EmployeeAPI

public IEnumerable<string> Get()

{

return new string[] { "value1", "value2" };

}

// GET api/EmployeeAPI/5

public string Get(int id)

{

return "value";

}

// POST EmployeeAPI /values

public void Post([FromBody]string value)

{

}

// PUT api/ EmployeeAPI /5

public void Put(int id, [FromBody]string value)

{

}

// DELETE api/ EmployeeAPI /5

public void Delete(int id)

{

}

Step 6: Now create your GUI and on a button click write a server side method. Form this method you can communicate with API. In my case I took a console application.

If you run the web project you will get your local host URL, in my case it was http://localhost:58100/
Here in the authorization Header I have added my username and password in the given format username:password and encoding it to Base64 so that it provides security.
If you don’t pass valid credentials from here, in the method OnAuthorization it should add Unauthorized Response.

Step 7: Create console / windows/ web application to consume the API

Here I’ve created Console application.

File: Program.cs

public class Program
    {
        static void Main(string[] args)
        {
            HttpClientHandler handler = new HttpClientHandler();

            HttpClient client = new HttpClient(handler);

            var authorizationHeader = 
                         Convert.ToBase64String(Encoding.UTF8.GetBytes("phani:pass"));

            client.DefaultRequestHeaders.Authorization = 
                         new AuthenticationHeaderValue("Authorization",authorizationHeader);
            var result 
               = client.GetAsync(new Uri("http://localhost:58100/api/EmployeeAPI/")).Result;

            var res = result.Content.ReadAsByteArrayAsync().Result;       
    
            if (result.IsSuccessStatusCode)
            {
                Console.WriteLine("Done" + result.StatusCode);
            }
            else
                Console.WriteLine("Error" + result.StatusCode);

            Console.ReadLine();
        }
    }

public class Program

{

static void Main(string[] args)

{

HttpClientHandler handler = new HttpClientHandler();

HttpClient client = new HttpClient(handler);

var authorizationHeader =

Convert.ToBase64String(Encoding.UTF8.GetBytes("phani:pass"));

client.DefaultRequestHeaders.Authorization =

new AuthenticationHeaderValue("Authorization",authorizationHeader);

var result

= client.GetAsync(new Uri("http://localhost:58100/api/EmployeeAPI/")).Result;

var res = result.Content.ReadAsByteArrayAsync().Result;

if (result.IsSuccessStatusCode)

{

Console.WriteLine("Done" + result.StatusCode);

}

else

Console.WriteLine("Error" + result.StatusCode);

Console.ReadLine();

}

Here HTTPClient is used to consume RESTful API’s.
And then creating the Authorization header to pass the username and password in format (username: password).
client.GetAsync consumes the API and returns the Result.
From the result we can check the Status Code.

Angular 4 Directives – Lesson 3.3

May 14, 2018June 1, 2018 admin847785456 Leave a comment

3.2 Attribute Directives

Here directive is just a class with decorator @Directive and this allows us to specify the directive’s selector.

Using custom attribute directive we can change the color, back-ground, font-size etc., of the HTML host element by using ElementRef
Renderer class is a built-in service that provides an abstraction for UI rendering manipulations.

Let’s create a custom attribute directive “ShowAlert”

Step 1: Create a folder and name it as CustomDirective: /src/app/CustomDirective

Step 2: Now create a typescript file to create your own attribute directive under the associated folder created. And then import Directive, ElementRef, HostListener, Renderer from @angular/core library.

Step 3: And provide your selector name, here I’ve named it as ShowAlert, and create a class that make this directive visible to the component i.e.,add export before the class.

File: app.myDirective.ts

import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';

@Directive({
    selector: '[ShowAlert]'
})
export class FirstAttrDirective{}

import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';

@Directive({

selector: '[ShowAlert]'

})

export class FirstAttrDirective{}

Step 4: Now define contructor for FirstAttrDirective class, and define the style and events using renderer.

For setting up styles,

Renderer.setElementStyle(rendererElement:any, styleName: string, styleValue: string)

(or)

ElementRef.nativeElement.style

For creating events,

Renderer.listen(parentElement: any, name: string, callBack: function)

export class FirstAttrDirective{
constructor(private el: ElementRef, private renderer: Renderer) {
        renderer.setElementStyle(el.nativeElement, "cursor", "pointer");
        renderer.setElementStyle(el.nativeElement, "color", "blue");

        renderer.listen(el.nativeElement, "mouseover", function () {
            renderer.setElementStyle(el.nativeElement, "color", "red");
            el.nativeElement.style.fontSize = '24px';
            //renderer.setElementStyle(el.nativeElement, "font-size", "24px");
        });
        renderer.listen(el.nativeElement, "mouseout", function () {
            renderer.setElementStyle(el.nativeElement, "color", "blue");
            renderer.setElementStyle(el.nativeElement, "font-size", "16px");
        });
        renderer.listen(el.nativeElement, "click", function () {
            alert("hello world");
        });
    }
}

export class FirstAttrDirective{

constructor(private el: ElementRef, private renderer: Renderer) {

renderer.setElementStyle(el.nativeElement, "cursor", "pointer");

renderer.setElementStyle(el.nativeElement, "color", "blue");

renderer.listen(el.nativeElement, "mouseover", function () {

renderer.setElementStyle(el.nativeElement, "color", "red");

el.nativeElement.style.fontSize = '24px';

//renderer.setElementStyle(el.nativeElement, "font-size", "24px");

});

renderer.listen(el.nativeElement, "mouseout", function () {

renderer.setElementStyle(el.nativeElement, "color", "blue");

renderer.setElementStyle(el.nativeElement, "font-size", "16px");

});

renderer.listen(el.nativeElement, "click", function () {

alert("hello world");

});

}

Step 5: Create your component

File: app.component.ts

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

@Component({
    selector: 'my-app',
    template: `<div ShowAlert color="blue"> Show Alert </div>`
})
export class AppComponent {}

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

@Component({

selector: 'my-app',

template: `<div ShowAlert color="blue"> Show Alert </div>`

})

export class AppComponent {}

Step 6: Add component and Directive in the declaration[ ] of the NgModule i.e., AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FirstAttrDirective } from './app.myDirective';

@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        FirstAttrDirective
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FirstAttrDirective } from './app.myDirective';

@NgModule({

imports: [BrowserModule],

declarations: [

AppComponent,

FirstAttrDirective

bootstrap: [AppComponent]

})

export class AppModule { }

Step 7: Create a main.ts to bootstrap the NgModule

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Step 8: Create a HTML file in /src/

File: CustomDirective.html

Refer required scripts shim.min.js, zone.js, system.src.js, system.config.js and refer the main.js from CustomDirective folder

System.import('app/CustomDirective/main.js').catch(function (err) { console.error(err); });
<body>
    <my-app>Loading...</my-app>
</body>

System.import('app/CustomDirective/main.js').catch(function (err) { console.error(err); });

<body>

<my-app>Loading...</my-app>

</body>

Output: Default color will be blue, on mouseover font size get increased and changes its color to red, on mouseout will change color to blue and decrease its font size.

Tadaaaa.. 🙂

Angular 4 Directives- Lesson 3.2

May 9, 2018 admin847785456 Leave a comment

Hi friends, in the last session we have learned about built-in directives (ngIf, ngFor, ngSwitch). In this session we will learn,

Style and Class Directives ( ngClass, ngStyle)

ngClass:

It is used to add and remove CSS classes on an HTML element.
CSS Classes can be added in several ways

Using string
Using array
Using object
Using Component methods

When using ngClass with object, classes will be added and removed based on the Boolean value that returned.
If the value of expression istrue then respective CSS class will be added otherwise that CSS class will be removed from HTML element at run time.

Using String: When using string format, class names must be presented between single quotes with in double quotes “‘class1′” and multiple classes can be separated by space.

File: template.html

<p [ngClass]="'class1'">
        Using String.
</p>

<!--Adding multiple classes -->
<p [ngClass]="'class1 class2'">
        Using String.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees" [ngClass]="'class1 class2'">
       {{emp.EmpName}}
</div>

Using String.

</p>

Using String.

</p>

</div>

File: app.component.ts

Adding styles for the respective classes in component

@Component({
  selector: 'my-app', 
  templateUrl: './template.html',
  styles: [`
      .class1 {
          background-color: red;
      }
      .class2 {
          font-size: 24px;
      }
`]
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
}

@Component({

selector: 'my-app',

templateUrl: './template.html',

styles: [`

.class1 {

background-color: red;

}

.class2 {

font-size: 24px;

}

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

}

ngClass using array: When using Array format, each ngClass array item (i.e.,class) must be presented in the string format.

Ex: [ngClass] =”[‘class1′,’class2’]”

File: template.html

<p [ngClass]="['class1', 'class2']">
        Using Array.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees" [ngClass]="['class1', 'class2']">
       {{emp.EmpName}}
</div>

Using Array.

</p>

</div>

ngClass using object: When using object, classes will be formatted in the form of object i.e., each class will be of key and value pairs.

Key: css class name

Value: expression that returns Boolean value

<p [ngClass]="{'one': true, 'three': false }">
        Using Object.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees; let flag = odd;">
<div [ngClass]="{'class1':flag, 'class2':flag, 'class3':!flag, 'class4':!flag}"> {{emp.EmpName}} </div>
</div>

Using Object.

</p>

<div [ngClass]="{'class1':flag, 'class2':flag, 'class3':!flag, 'class4':!flag}"> {{emp.EmpName}} </div>

</div>

In component file add styles for the respective classes

import { Component } from '@angular/core';
 
@Component({
  selector: 'my-app', 
  templateUrl: './template.html',
  styles: [`
      .class1 {
          color: green;
      }
      .class2 {
          font-size: 20px;
      }
      .class3 {
          color: red;
      }
      .class4 {
          font-size: 15px;
      } 
`]

})
export class AppComponent {
}

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

@Component({

selector: 'my-app',

templateUrl: './template.html',

styles: [`

.class1 {

color: green;

}

.class2 {

font-size: 20px;

}

.class3 {

color: red;

}

.class4 {

font-size: 15px;

}

})

export class AppComponent {

}

Using Component Methods: Whereas when using component methods, instead declaring styles statically here styles will be dynamically rendered into template by calling component methods.

Depending upon the need/requirement we can pass parameters to the component methods and can dynamically get the required styles.

Ex: [ngClass]=”GetStyles( )”

File: template.html

<div [ngClass]="getClasses()">
        Using Component Method.
    </div>

Using Component Method.

</div>

File: app.component.ts

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

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
   
    getClasses(flag: string) {
        let cssClasses;
            cssClasses = {
                'class1': true,
                'class2': true,
                'class3': true,
                'class4': true
            }
        return cssClasses;
    }	
}

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

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

getClasses(flag: string) {

let cssClasses;

cssClasses = {

'class1': true,

'class2': true,

'class3': true,

'class4': true

}

return cssClasses;

}

ngStyle: This directive is used to modify the elements / component styles

It accepts an object which defines the elements styles.
Both kebab case and lower camel case can be used when specifying style properties.
Flexible to add and remove style properties.

File: template.html

<h3>ngStyles Examples</h3>
Enter Size:  <input type="text" name="name" [(ngModel)]="fontsize" value="" />
<input type="radio" name="name" [(ngModel)]="color" value="red" /> Red
<input type="radio" name="name" [(ngModel)]="color" value="green" /> Green
<input type="radio" name="name" [(ngModel)]="color" value="blue" /> Blue
<p [ngStyle]="{'font-size':fontsize+'px','color':color}">{{myname}}</p>

<h3>ngStyles Examples</h3>

Enter Size: <input type="text" name="name" [(ngModel)]="fontsize" value="" />

<input type="radio" name="name" [(ngModel)]="color" value="red" /> Red

<input type="radio" name="name" [(ngModel)]="color" value="green" /> Green

<input type="radio" name="name" [(ngModel)]="color" value="blue" /> Blue

<p [ngStyle]="{'font-size':fontsize+'px','color':color}">{{myname}}</p>

File: app.component.ts

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

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    myname: string = "John";

    //rest of the code goes here
}

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

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

myname: string = "John";

//rest of the code goes here

}

JSX Expressions

May 3, 2018May 3, 2018 admin847785456 Leave a comment

Overview of JSX
Creating HTML/XML elements/nodes with JSX
JSX Attributes / props
Comments in JSX
Expressions with
- Arithmetic operators
- Ternary Operators
- Comparison Operators
- Assignment Operators

Overview of JSX

The full-form of JSX is Javascript and XML, e., simply JSX = Javascript + XML/HTML
JSX is a simple syntax with a combination of HTML/XML tags with Javascript
React used JavaScript expressions within curly braces “{ <expression> }”. We can put any type of JavaScript expression in the curly braces inside JSX.
React can perform only one-way binding, to perform two-way binding we need to use React component’s state and props/ Event listeners.
Each React Element is like a real kind of javascript object which can be either stored in a variable or can be used throughout the program.
After coding in JSX pages no need to precompile the code, the JSX file will be automatically compiled and generates JavaScript syntax in the browser if the JSX is written in ES5, but if the JSX is written in ES6 then this should be pre-compiled by either Babel/ Typescript e.,
1. Babel
  1. Babel is a process that transforms your JSX code (ES6) into Javascript (ES5) which is browser understandable code.
  2. Bable engine abstracts the Reacts ES6 JSX syntax and recreates that into ES5 syntax, for exampleCode written in ES6 syntax
    
    return <div>Hello {this.props.name}</div>;
    
    1
    
    return <div>Hello {this.props.name}</div>;
    
    Now Babel converts it into ES5 syntax as follows
    
    return React.createElement('div', null, 'Hello ', this.props.name);
    
    1
    
    return React.createElement('div', null, 'Hello ', this.props.name);
  3. We will install the following dev dependencies:
    1. babel-loader: babel module loader
    2. babel-core: the core transpiler used for transporting ES2015 and JSX code
    3. babel-preset-es2015: ES6/ES2015 support
    4. babel-preset-react: React/JSX support
    5. babel-preset-stage-2: babel preset for some extra features such as destructuring
    6. webpack: for bundling our packages for distribution and managing dependencies
    7. webpack-dev-server: our development server
      
      >npm install webpack webpack-dev-server --save-dev >npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev
      
      1
      2
      3
      
      >npm install webpack webpack-dev-server --save-dev
      >npm install babel-loader babel-core babel-preset-es2015
      babel-preset-react babel-preset-stage-2 --save-dev
  4. Babel 6 doesn’t supports the bundle.js to transform the ES6 to ES5, so for that we need to use Babel older version (i.e., 5.8.X) to transform the JSX code to be pre-compiled and generates the javascript and saved into bundle.js (this can be renamed, and this code is rendered int0 browser) by using webpack.config.js.
2. Typescript
  1. Typescript is a language the can be either written in ES5/ ES6. Typescript has its own compiler tsc(typescript compiler) to pre-compile the ES6 syntax to ES5.
  2. We will install the following dev dependencies:
    1. ts-loader: typescript module loader to build .tsx
    2. typescript: language for programming in react (either in ES5/ ES6 syntax)
    3. webpack: for bundling our packages for distribution and managing dependencies
    4. webpack-dev-server: our development server
    5. This also uses the bundle.js where after compiling will be saved here with ES5 syntax.
    6. React with Typescript will be written in special extension files i.e., .tsx. Ex: sample.tsx
      
      >npm install webpack webpack-dev-server --save >npm install react react-dom ts-loader typescript --save
      
      1
      2
      
      >npm install webpack webpack-dev-server --save
      >npm install react react-dom ts-loader typescript --save
Within a JSX syntax we can perform both Data-Binding and Event Binding.

Creating HTML/XML Elements/nodes in JSX:

For creating HTML/XML nodes in JSX React provides a pre-defined function.

Syntax:

React.createElement(type, props, children)

1	React.createElement(type, props, children)

Where type, props and children are the arguments for function React.createElement( ).

Type (string / React.createClass( ) ): This is a mandatory argument. Type argument can be a string value (or) it can be a ReactComponent instance.

Props (null / object): This is an optional argument, where we can pass null (or) an object

Children (null / string / React.createClass( ) / React.createElement( ) ): This is an optional argument, we can either pass null value (or) string value (or) React.createElement (or) React.createClass instance.

ReactDOM.render( ): For rendering react nodes into DOM, React provides function ReactDOM.render( ) from “react-dom” module.

Rendering in react is also possible on server-side withrenderToString( ).
If a change is made (or) a new child nodes has been added to DOM element, ReactDOM will only update the child nodes which is called Re-Rendering.

Ex: Creating <ul> tag with nested <li> tags

var liOne = React.createElement("li", null, "one");
var liTwo = React.createElement("li", null, "two");
var liThree = React.createElement("li", null, "three");
var subNodes = [liOne, liTwo, liThree];
var ulElement = React.createElement("ul", null, subNodes);

ReactDOM.render(ulElement, document.getElementById('body'));

var liOne = React.createElement("li", null, "one");

var liTwo = React.createElement("li", null, "two");

var liThree = React.createElement("li", null, "three");

var subNodes = [liOne, liTwo, liThree];

var ulElement = React.createElement("ul", null, subNodes);

ReactDOM.render(ulElement, document.getElementById('body'));

JSX Props: We have already know the syntax for creating custom HTML elements, second parameter props can be passed as an object/null.

React.createElement(type, props, children)

1	React.createElement(type, props, children)

Props are nothing but HTML attributes that are passed as name-value pairs.
Props are generally used for passing inputs to the component.
Props can be passed to nodes in a Component (or) directly to the Component.
1. Props that are used for nodes/elements are called Node Props/Attributes.
2. Props that are used for Components are called Component Props/Attributes.
Props creating may vary when using Typescript with React (TSX) with Formal React (JSX). When using TSX must define the type of the Props when creating nodes.

Using Typescript with React (TSX)

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface testprops extends React.Props<any> {
    name: string;
}
var liFour = React.createElement<testprops>((props: testprops) => <li>{props.name}</li>, { name: "four" }, "four");

var liOne = React.createElement("li", null, 'one');
var liTwo = React.createElement("li", null, "two");
var liThree = React.createElement("li", null, "three");
var subNodes = [liOne, liTwo, liThree, liFour];
var ulElement = React.createElement("ul", null, subNodes);

ReactDOM.render(ulElement, document.getElementById('body'));

import * as React from 'react';

import * as ReactDOM from 'react-dom';

interface testprops extends React.Props<any> {

name: string;

}

var liFour = React.createElement<testprops>((props: testprops) => <li>{props.name}</li>, { name: "four" }, "four");

var liOne = React.createElement("li", null, 'one');

var liTwo = React.createElement("li", null, "two");

var liThree = React.createElement("li", null, "three");

var subNodes = [liOne, liTwo, liThree, liFour];

var ulElement = React.createElement("ul", null, subNodes);

ReactDOM.render(ulElement, document.getElementById('body'));

Comments in JSX:

Comments in jsx use // and /* */

// Single line comments in jsx
//ReactDOM.render(<h1>Welcome</h1>,document.getElementById('content'));
/*
 For Multiline comments in jsx 
 */

// Single line comments in jsx

//ReactDOM.render(<h1>Welcome</h1>,document.getElementById('content'));

For Multiline comments in jsx

Ex:

var liElement = React.createElement(
    "ul",
    null,
    "/* use ",
    "{}",
    " here to comment*/"
);

var liElement = React.createElement(

"ul",

null,

"/* use ",

"{}",

" here to comment*/"

);

Javascript Expressions:

To make use of Javascript statements with JSX, React provides a syntax using curly braces “{ }”.

Note: Follow the steps for setup ASP.NET MVC application in React Introduction.

Example:

Step1: Open your ASP.NET MVC application à src/expressions.tsx (Creating file expressions.tsx in src )

Note: Run webpack.config.js , because unless it is running in the background the changes which we have done will not be reflected in the bundle.js. So make sure that while making any changes in .tsx files, webpack.config.js is running in the background.

File: expressions.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{
    render() {
        return <div>            
            <h3>Sum of 2+3 = {2 + 3} </h3>             
            </div>
    }
}
ReactDOM.render(<Expression />, document.getElementById('body'));

import * as React from 'react';

import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{

render() {

return <div>

</div>

}

ReactDOM.render(<Expression />, document.getElementById('body'));

File: index.cshtml

<div id="body"></div>

<script src="/dist/bundle.js"></script>

File: webpack.config.js

Change the entry point to expressions.tsx

module.exports = {

    entry: "./src/expressions.tsx",
. . .
. . .
. . .
}

module.exports = {

entry: "./src/expressions.tsx",

. . .

}

Output:

Sum of 2+3 = 5

JSX Expression with Arithmetic Operators:

File: src/expressions.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{
    render() {
        return <div>
            <h3>Working with Arithematic Operators</h3>
            <h4>Sum of 2+3 = {2 + 3} </h4> 
            <h4>Sub of 3-2= {3-2}</h4>
            <h4>Mul of 2*3= {2 * 3}</h4>
            <h4>Division of 3/2= {3 / 2}</h4>
            <h4>Modulo Division of 3%2= {3 % 2}</h4>
            </div>
    }
}

ReactDOM.render(<Expression />, document.getElementById('body'));

import * as React from 'react';

import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{

render() {

return <div>

<h3>Working with Arithematic Operators</h3>

<h4>Division of 3/2= {3 / 2}</h4>

<h4>Modulo Division of 3%2= {3 % 2}</h4>

</div>

}

ReactDOM.render(<Expression />, document.getElementById('body'));

JSX Expression with Ternary Operators:

Javascript Ternary Operators ( ? : ) returns two expression depending on condition

Ex:

var a = true;

var result = a == true ?’yes’ : ‘no’;

File: expressions.tsx

Modify the render( ) as follows

render() {
        var txt = 'abc';
        var res = txt == 'abc' ? 'correct' : 'wrong';

        return <div>
            <h3>Working with Ternary Operators</h3>
            <h4>Result for ternary expression = {res}</h4>
</div>
    }

render() {

var txt = 'abc';

var res = txt == 'abc' ? 'correct' : 'wrong';

return <div>

<h3>Working with Ternary Operators</h3>

<h4>Result for ternary expression = {res}</h4>

</div>

}

JSX Expression with Comparison Operators

Comparison operators are used to compare any two values / variables

List of the comparison operators

render() {
        var a = 10, b = 20;
        var isGreater = a > b ? 'correct': 'wrong';
        var isLesser = a < b ? 'correct' : 'wrong';
        var isEqual = a == b ? 'correct' : 'wrong';
        var isTripleEqual = a === b ? 'correct' : 'wrong';
        var isGreaterthanequal = a >= b ? 'correct' : 'wrong';
        var isLessthanequal = a <= b ? 'correct' : 'wrong';

        return <div>
            
            <h3>Working with Comparison Operators</h3>
            <h4>a = 10 b = 20</h4>
            <h4> a is greater than b = {isGreater}</h4>
            <h4> a is less than b = {isLesser}</h4>
            <h4> a is equal to b = {isEqual}</h4>
            <h4> a is tripple equalt to b = {isTripleEqual}</h4>
            <h4> a is greater than equal to b = {isGreaterthanequal}</h4>
            <h4> a is less than equal to b  = {isLessthanequal}</h4>
            </div>
    }

render() {

var a = 10, b = 20;

var isGreater = a > b ? 'correct': 'wrong';

var isLesser = a < b ? 'correct' : 'wrong';

var isEqual = a == b ? 'correct' : 'wrong';

var isTripleEqual = a === b ? 'correct' : 'wrong';

var isGreaterthanequal = a >= b ? 'correct' : 'wrong';

var isLessthanequal = a <= b ? 'correct' : 'wrong';

return <div>

<h3>Working with Comparison Operators</h3>

<h4> a is greater than b = {isGreater}</h4>

<h4> a is less than b = {isLesser}</h4>

<h4> a is equal to b = {isEqual}</h4>

<h4> a is tripple equalt to b = {isTripleEqual}</h4>

<h4> a is greater than equal to b = {isGreaterthanequal}</h4>

<h4> a is less than equal to b = {isLessthanequal}</h4>

</div>

}

JSX Expression with Assignment Operators:

Assignment operators just assigns the value to a variable.

Ex:

render() {
        var x = 5;
        return <div>
            <h3>Working with Assignment Operators</h3>
            <h4>x = 5</h4>
            <h4>x += 5 = {x += 5}</h4>
            <h4>x -= 5 = {x -= 5}</h4>
            <h4>x *= 5 = {x *= 5}</h4>
            <h4>x /= 5 = {x /= 5}</h4>
            <h4>x %= 5 = {x %= 5}</h4>
        </div>
    }

render() {

var x = 5;

return <div>

<h3>Working with Assignment Operators</h3>

</div>

}

Complete Example

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{
    render() {
        var txt = 'abc';
        var res = txt == 'abc' ? 'correct' : 'wrong';

        var a = 10, b = 20;
        var isGreater = a > b ? 'correct': 'wrong';
        var isLesser = a < b ? 'correct' : 'wrong';
        var isEqual = a == b ? 'correct' : 'wrong';
        var isTripleEqual = a === b ? 'correct' : 'wrong';
        var isGreaterthanequal = a >= b ? 'correct' : 'wrong';
        var isLessthanequal = a <= b ? 'correct' : 'wrong';

        var x = 5;


        return <div>
            <h3>Working with Arithematic Operators</h3>
            <h4>Sum of 2+3 = {2 + 3} </h4> 
            <h4>Sub of 3-2= {3-2}</h4>
            <h4>Mul of 2*3= {2 * 3}</h4>
            <h4>Division of 3/2= {3 / 2}</h4>
            <h4>Modulo Division of 3%2= {3 % 2}</h4>

            <hr />
            <h3>Working with Ternary Operators</h3>
            <h4>Result for ternary expression = {res}</h4>

            <hr/>
            <h3>Working with Comparison Operators</h3>
            <h4>a = 10 b = 20</h4>
            <h4> a is greater than b = {isGreater}</h4>
            <h4> a is less than b = {isLesser}</h4>
            <h4> a is equal to b = {isEqual}</h4>
            <h4> a is tripple equalt to b = {isTripleEqual}</h4>
            <h4> a is greater than equal to b = {isGreaterthanequal}</h4>
            <h4> a is less than equal to b  = {isLessthanequal}</h4>

            <hr />
            <h3>Working with Assignment Operators</h3>
            <h4>x = 5</h4>
            <h4>x += 5 = {x += 5}</h4>
            <h4>x -= 5 = {x -= 5}</h4>
            <h4>x *= 5 = {x *= 5}</h4>
            <h4>x /= 5 = {x /= 5}</h4>
            <h4>x %= 5 = {x %= 5}</h4>
        </div>


    }
}

ReactDOM.render(<Expression />, document.getElementById('body'));

import * as React from 'react';

import * as ReactDOM from 'react-dom';

class Expression extends React.Component<{}, {}>{

render() {

var txt = 'abc';

var res = txt == 'abc' ? 'correct' : 'wrong';

var a = 10, b = 20;

var isGreater = a > b ? 'correct': 'wrong';

var isLesser = a < b ? 'correct' : 'wrong';

var isEqual = a == b ? 'correct' : 'wrong';

var isTripleEqual = a === b ? 'correct' : 'wrong';

var isGreaterthanequal = a >= b ? 'correct' : 'wrong';

var isLessthanequal = a <= b ? 'correct' : 'wrong';

var x = 5;

return <div>

<h3>Working with Arithematic Operators</h3>

<h4>Division of 3/2= {3 / 2}</h4>

<h4>Modulo Division of 3%2= {3 % 2}</h4>

<hr />

<h3>Working with Ternary Operators</h3>

<h4>Result for ternary expression = {res}</h4>

<hr/>

<h3>Working with Comparison Operators</h3>

<h4> a is greater than b = {isGreater}</h4>

<h4> a is less than b = {isLesser}</h4>

<h4> a is equal to b = {isEqual}</h4>

<h4> a is tripple equalt to b = {isTripleEqual}</h4>

<h4> a is greater than equal to b = {isGreaterthanequal}</h4>

<h4> a is less than equal to b = {isLessthanequal}</h4>

<hr />

<h3>Working with Assignment Operators</h3>

</div>

}

ReactDOM.render(<Expression />, document.getElementById('body'));

Angular 4 Directives – Lesson 3

April 24, 2018May 3, 2018 admin847785456 Leave a comment

Hi friends, in the last session we have learnt about how to setup in the local environment. In this session we will learn about Directives. Topics that are going to be covered in this session are

Structural directives (Built-in Directives (ngIF, ngFor, ngSwitch)
Style and Class Directives ( ngClass, ngStyle)
Attribute directives
Host Listener and Host Binding

Overview of Directives:

Directives are the classes that can change the behaviour or appearance of the components by using CSS Classes, CSS Styles and events.

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element.

Components are the most common of the three directives. You saw a component for the first time in the QuickStart example.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf in the Template Syntax page.

We use (*) before the structural directives, and when we use (*) before ngIf/ ngFor, angular actually recognizes that the current element as a template and it will read the current elements as <ng-template>. Where as in Angular 2.X it reads as <template>.

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax page, for example, can change several element styles at the same time.

*ngIf: This directive is used for conditional check on the HTML targeting elements. This will work similar to ng-if in Angular 1.X, where the elements will not get rendered into DOM until the condition satisfies.

Step1: From the quick start example edit the component.ts

File: app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    hide = false;    
    myname = "John Smith";
}

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

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

hide = false;

myname = "John Smith";

}

Step2: Create a template.html in the app folder

File: template.html

<p *ngIf="!hide">{{myname}}</p>

<!--By using comparision-->
<p *ngIf="myname=='John Smith'">{{myname}}</p>

<p *ngIf="!hide">{{myname}}</p>

<p *ngIf="myname=='John Smith'">{{myname}}</p>

Note: when use * before ngIf, angular treats it as <ng-template>

<ng-template [ngIf]="myname == 'John Smith'">
  John Smith
</ng-template>

<ng-template [ngIf]="myname == 'John Smith'">

John Smith

</ng-template>

*ngIf else: Angular 4 *ngIf has if/else syntax that make sense when you are making ajax calls we can show loading within the page. Where as else block is not existed in Angular 2.

From the above example, add the following html in the template

File: template.html

<p *ngIf="hide ;else template1">{{myname}}</p>

    <ng-template #template1>
        Hello {{myname}}
    </ng-template>

<p *ngIf="hide ;else template1">{{myname}}</p>

<ng-template #template1>

Hello {{myname}}

</ng-template>

Angular compiler (JIT or AOT) transforms any <ng-template> elements and directives used with an asterisk (*) into views that are separate from the root component view.

Here when we use (*) before ngIF, angular actually recognizes that the current element as a template, and angular reads it as,

<ng-template [ngIf]="hide">
    {{myname}}
</ng-template>

<ng-template [ngIf]="hide">

</ng-template>

*ngIf then else: *ngIf directive can use two templates, one for If condition and the other for else condition. In the previous example we have seen using template for else condition, now for If condition we need to use then statement.

File: template.html

<p *ngIf="!hide;then template1;else template2">{{myname}}</p>

    <ng-template #template1>
        Hello {{myname}}
    </ng-template>

    <ng-template #template2>
        Default template
    </ng-template>

<p *ngIf="!hide;then template1;else template2">{{myname}}</p>

<ng-template #template1>

Hello {{myname}}

</ng-template>

<ng-template #template2>

Default template

</ng-template>

*ngFor: *ngFor directive is used to iterate through each element of any array, it works similar to For Loop in JavaScript, where in JavaScript we will write for loop within the <script> tag, but in angular we use *ngFor in the HTML as directive for any kind of elements.

From the above example add the following code in the component file

File: app.component.ts

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

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
}

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

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

}

File: template.html

<p>List of employees</p>
<ul>
    <li *ngFor="let emp of employees">{{emp.EmpName}}</li>
</ul>

<p>List of employees</p>

<ul>

<li *ngFor="let emp of employees">{{emp.EmpName}}</li>

</ul>

Here we are using for..of, where

for..of iterates through items and returns values
for..in iterates through properties and returns list of keys
let is a keyword which is a dynamic datatype of ECMA script.
emp is a temporary variable that hold the current employee from the employees array.
employees is the array of items

Here the let can also create a index as a reference of the current item.

<ul>
     <li *ngFor="let emp of employees;let i=index">item {{i}}: {{emp.EmpName}}</li>
</ul>

<ul>

<li *ngFor="let emp of employees;let i=index">item {{i}}: {{emp.EmpName}}</li>

</ul>

Here index is a built-in keyword of angular framework which can be used in *ngFor. Where angular renders the above code as follows.

<ul>
  <ng-template ngFor let-emp [ngForOf]="employees">
     <li>item {{i}}: {{emp.EmpName}}</li>
  </ng-template>
</ul>

<ul>

<ng-template ngFor let-emp [ngForOf]="employees">

<li>item {{i}}: {{emp.EmpName}}</li>

</ng-template>

</ul>

*ngFor with select tag:

<select>
     <option *ngFor="let emp of employees;let i=index" [value]="emp.EmpId">
          item {{i}}: {{emp.EmpName}}
     </option>
</select>

item {{i}}: {{emp.EmpName}}

</option>

</select>

(or)

<select>
     <option *ngFor="let emp of employees;let i=index" value="{{emp.EmpId}}">
       item {{i}}: {{emp.EmpName}}
     </option>
</select>

item {{i}}: {{emp.EmpName}}

</option>

</select>

ngSwitch: ngSwitch works similarly the switch statement that we use in C# / java etc., Here for defining case we use *ngSwitchCase and for default case we use *ngSwitchDefault

From the above example using the same list of employees, we have created a example

<p>Using ngSwitch</p>
<button (click)="value=0">Emp 1</button>
<button (click)="value=1">Emp 2</button>
<button (click)="value=2">Emp 3</button>
<hr>
	<div [ngSwitch]="value">
		<div *ngSwitchCase="0">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchCase="1">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchCase="2">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchDefault>Default Template</div>
	</div>

<p>Using ngSwitch</p>

<hr>

<div *ngSwitchCase="0">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchCase="1">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchCase="2">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchDefault>Default Template</div>

</div>