DEV Community: Khaja Moizuddin

Angular's Data Binding from Scratch - Part One.

Khaja Moizuddin — Tue, 14 Jan 2020 20:49:16 +0000

Introduction

In this article, we will learn about Data Binding in Angular. As we know Data Binding is used for binding the data from View to Component or Component to View. In Angular, we have two different types of Data Binding for binding the data from Component.ts class file to Component.html or Component.html to Component.ts or Vice versa.

One way Data Binding

In one-way data binding, we have two different types of data binding that are binding of data from Component.html or View to Component.ts class file or Component.ts class file to Component.html.

We have different ways of binding the data from Component.ts class file to Component.html as shown below.
String Interpolation
Property Binding
Style Binding
Class Binding
Attribute Binding etc.
In order to pass the data from Component.html (View) to Component.ts or One-way data binding, we use Event Binding.

Another way to bind the data from Component.html or View to Component.ts or Component.ts to Component.html we use

Two-way Data Binding.

String Interpolation

In String Interpolation we bind the data from Component.ts class file to Component.html by using the expression in double curly braces. If we don't pass the data or the component's field in double curly braces then angular treat this as a string value and display the string value to the end-user.

For example,

Open the Component.ts file and place the below code.

export class Test3Component implements OnInit {    
   firstName: string = 'Khaja';    
   lastName: string = 'Moizuddin';    
   number1: number = 100;    
   number2: number = 200;    
   totalAmount: number = this.number1 + this.number2;    
   fullName: string = this.firstName + this.lastName;    
   fullNameVal:string;    
   totalVal:number;    
   csharpCornerURL: string = 'https://www.c-sharpcorner.com/members/khaja-moiz';    
   myImagePath: string = 'assets/Images/mvp1.jpg';    
   heightImg: number = 50;    
   widthImg:number = 50;    
   onButtonClick: string;    
   onDoubleClick: string;    

  getTotalAmount1() {    
    return this.number1 + this.number2;    
 }    

  getTotalAmount2() {    
return this.totalVal = this.number1 + this.number2;    

  }    

  getTotalAmount3() {    
   return this.totalVal = this.totalAmount;    
  }    
  getFullName1() {    
    return this.firstName + this.lastName;    
  }    
  getFullName2() {    
 return this.fullNameVal = this.firstName + this.lastName;    
  }    
  getFullName3() {    
    return this.fullNameVal = this.fullName;    
  }    
  onBtnClick() {    
return this.onButtonClick = 'Welcome ' + this.firstName;    
  }    
  onDblClick(){    
    return this.onDoubleClick = 'Welcome ' + this.lastName;    
  }    
constructor() { }    
  ngOnInit() {    
  }    
}

Now open the Component.html file and place the below code.

<h2>STRING INTERPOLATION</h2>    
<hr>    
<h3> firstName is:{{this.firstName}}  </h3>    
<h3> lastName is: {{this.lastName}} </h3>    
<h3> fullName is:{{this.fullName}}  </h3>    
<h3> fullName1 is:{{this.getFullName1()}}  </h3>    
<h3> fullName2 is:{{this.getFullName2()}} </h3>    
<h3> fullName3 is:{{this.getFullName3()}}  </h3>    
<h3> Number1 is : {{this.number1}} </h3>    
<h3> Number2 is:{{this.number2}}  </h3>    
<h3> TotalAmount is:{{this.totalAmount}}  </h3>    
<h3> TotalAmount1 is:{{this.getTotalAmount1()}}  </h3>    
<h3> TotalAmount2 is:{{this.getTotalAmount2()}}  </h3>    
<h3>TotalAmount3 is: {{this.getTotalAmount3()}}  </h3>

Here in the above code we used different ways of binding the data in String Interpolation, we used double curly braces for binding the data from component.ts to component.html with this it converts the field values as expression.

In the above we used fullName: string = this.firstName + this.lastName; or totalAmount: number = this.number1 + this.number2; which converts the values as an expressions and returns the result to the end user.

Property Binding

In Property binding, we bind the data from Component.ts to Component.html. The HTML elements property is bound with the values from Component.ts file using square brackets [].

For Example,

Now open the Component.html file and place the below code.

<span [innerText]='this.firstName'></span><br>    
<span [innerHTML] = 'this.lastName'></span><br>    
<span innerText = '{{this.firstName}}'></span><br>    
<span innerHTML = '{{this.lastName}}'></span>

In the above code we used [innerHTML] and [innerText] which is nothing but property binding, here the values this.firstName, this.lastName is binded from the Component.ts file, the Output will be visible to the end user which will be placed in between the span tags.

<!--BINDING PROPERTY TO DOM ELEMENT-->    
<span [attr.innerText]='this.firstName'></span><br>    
<span [attr.innerHTML] = 'this.lastName'></span><br>    
<span attr.innerText = '{{this.firstName}}'></span><br>    
<span attr.innerHTML = '{{this.lastName}}'></span>

With the above code, we used attr attribute which is nothing but attribute binding with property name which binds the Component's value to the DOM element. The output will not be visible to the end-user but the innerText and innerHTML property will be added to the span tags which can be shown below.

<a href="{{this.csharpCornerURL}}" target="_blank">CsharpCorner</a><br>    
<a [href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>    
<a attr.href = '{{this.csharpCornerURL}}' target="_blank">CsharpCorner</a><br>    
<a [attr.href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>    

<img src='{{this.myImagePath}}' height='{{this.heightImg}}' width="{{this.widthImg}}" /><br>    
<img [src]='this.myImagePath' [height]='this.heightImg' [width]="this.widthImg"><br>    
<img attr.src = '{{this.myImagePath}}' attr.height='{{this.heightImg}}' attr.width="{{this.widthImg}}"><br>    
<img [attr.src]='this.myImagePath' [attr.height]='this.heightImg' [attr.width]="this.widthImg">

Here i have used different ways of binding the Component's value to the property href and src as shown in the above code.

We will see other data binding properties in my next article.

Thanks & I hope this helps you.

Consuming RestApi using HttpClient

Khaja Moizuddin — Sun, 12 Jan 2020 10:45:43 +0000

Introduction

In this article, we will learn how to Consume RestAPI services using HttpClient. It is used for the Authentication and Authorization of users with LDAP Active Directory.
In C# we can consume RestAPI using the following ways,
HttpWebRequest or HttpWebResponse
WebClient
HttpClient
RestSharp Classes etc.
The best and most straightforward way to consume RestAPI is by using the HttpClient class.

In order to Consume RestAPI using HttpClient, we can use various methods like
ReadAsAsync
PostAsync
PutAsync
GetAsync
SendAsync etc.
In this article, I used HttpClient to Consume RestAPI Services. In order to Consume Restful Services, first of all, we need to generate access token by providing the accessToken URL with a POST request as well as the headers such as apikey, Authorization & Content-Type. Here apikey, ClientID, and Client Secure which will be provided by the service provider, Authorization contains Client ID and Client Secure which can be encoded with Base64String and passed as encrypted value with Basic as prefix and Content-Type should be "application/x-www-form-urlencoded".

For example: Authorization = Basic AccessToken

In the body, we need to provide grant_type as client_credentials and scope as public with "x-www-form-urlencoded" value.

When we execute the POST request by providing all the required details as mentioned above, the access token will be generated.

We can use POSTMAN tool to test or generate the access token.

In this article, I am going to use two different methods as shown below.
EmployeeRegisteration
EmployeeSearch etc.

In order to work with the above methods, each method contains URL endpoint with either GET/PUT/POST/DELETE requests, etc. From the above methods, we have two POST request and two GET requests, i.e. EmployeeRegisteration & EmployeeSearch are POST request and GetSecretQuestions & GetCountryNames are GET requests.
EmployeeRegisteration method contains headers like Content-type as application/json, apikey, and Authorization.

Here Authorization contains the generated token with Bearer as the prefix.

For Example Authorization = Bearer AccessToken

And we need to pass the Body with the JSON Data as raw.

When executed the EmployeeRegisteration method with POST request by providing all the required details or parameters we get the JSON response with 200 OK which means its successful. If it is unsuccessful then we will get different messages like 500 Internal Server Error or 400 Bad Request etc. If it is successful then we will get a JSON response with the complete information.

For remaining methods like EmployeeSearch, GetSecretQuestions, GetCountryNames, the headers will be the same only the Body with JSON Data changes according to the requirement.

Below is the code to understand the Consumption of RestAPI using HttpClient.

GenerateAccessToken

Below is the code for the GenerateAccessToken Method.

class Program  
    {  
        string clientId = "a1s2d3f4g4h5j6k7l8m9n1b2v3c4";  
        string clientSecret = "z1x2c3v4b4n5m6l1k2j3h4g5f6d7s8";  
        string apikey = "o1i2u3y4t5r6e7w8q9a1s2d3f4g5h6j6k7l8";  
        string createNewUserJson;  
        string searchUserJson;  
        string accessToken;  
        EmployeeRegisterationResponse registerUserResponse = null;  
        EmployeeSearchResponse empSearchResponse = null;  
        GetSecurityQuestionsResponse getSecurityQueResponse = null;  
        GetCountryNamesResponse getCountryResponse = null;   
static void Main(string[] args)  
        {  
            Program prm = new Program();  
            prm.InvokeMethod();  
              
         }  
public async void InvokeMethod()  
        {  
            Task getAccessToken = GenerateAccessToken();  
            accessToken = await getAccessToken;  
  
            Task registerResponse = EmployeeRegistration(accessToken);  
            registerUserResponse = await registerResponse;  
  
            Task employeeSearchResponse = EmployeeSearch(accessToken);  
            empSearchResponse = await employeeSearchResponse;  
  
            Task getSecurityResponse = GetSecretQuestions(accessToken);  
            getSecurityQueResponse = await getSecurityResponse;  
  
            Task getCountryNamesResponse = GetCountryNames(accessToken);  
            getCountryResponse = await getCountryNamesResponse;  
        }  
public async Task GenerateAccessToken()  
        {  
            AccessTokenResponse token = null;  
  
            try  
            {  
                HttpClient client = HeadersForAccessTokenGenerate();  
                string body = "grant_type=client_credentials&scope=public";  
                client.BaseAddress = new Uri(accessTokenURL);  
                HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, client.BaseAddress);  
                request.Content = new StringContent(body,  
                                                    Encoding.UTF8,  
                                                    "application/x-www-form-urlencoded");//CONTENT-TYPE header  
  
                List> postData = new List>();  
  
                postData.Add(new KeyValuePair("grant_type", "client_credentials"));  
                postData.Add(new KeyValuePair("scope", "public"));  
  
                request.Content = new FormUrlEncodedContent(postData);  
HttpResponseMessage tokenResponse = client.PostAsync(baseUrl, new FormUrlEncodedContent(postData)).Result;  
  
                //var token = tokenResponse.Content.ReadAsStringAsync().Result;    
                token = await tokenResponse.Content.ReadAsAsync(new[] { new JsonMediaTypeFormatter() });  
            }  
  
  
            catch (HttpRequestException ex)  
            {  
                throw ex;  
            }  
            return token != null ? token.AccessToken : null;  
  
        }  
private HttpClient HeadersForAccessTokenGenerate()  
        {  
            HttpClientHandler handler = new HttpClientHandler() { UseDefaultCredentials = false };  
            HttpClient client = new HttpClient(handler);  
            try  
            {  
                client.BaseAddress = new Uri(baseUrl);  
                client.DefaultRequestHeaders.Accept.Clear();  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/x-www-form-urlencoded"));  
                client.DefaultRequestHeaders.Add("apikey", apikey);  
                client.DefaultRequestHeaders.Add("Authorization", "Basic " + Convert.ToBase64String(  
                         System.Text.ASCIIEncoding.ASCII.GetBytes(  
                            $"{clientId}:{clientSecret}")));  
            }  
            catch (Exception ex)  
            {  
                throw ex;  
            }  
            return client;  
        }

EmployeeRegistration Below is the code for EmployeeRegistration Method.

public async Task EmployeeRegistration(string accessToken)  
        {  
            EmployeeRegisterationResponse employeeRegisterationResponse = null;  
            try  
            {  
                string createEndPointURL = "https://www.c-sharpcorner/registerUsers";  
                string username = "KhajaMoiz", password = "Password", firstname = "Khaja", lastname = "Moizuddin", email = "Khaja.Moizuddin@gmail.com";  
                HttpClient client = Method_Headers(accessToken, createEndPointURL);  
                string registerUserJson = RegisterUserJson(username, password, firstname, lastname, email);  
                HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, Uri.EscapeUriString(client.BaseAddress.ToString()));  
                request.Content = new StringContent(registerUserJson, Encoding.UTF8, "application/json");  
                request.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");  
                HttpResponseMessage tokenResponse = client.PostAsync(Uri.EscapeUriString(client.BaseAddress.ToString()), request.Content).Result;  
                if (tokenResponse.IsSuccessStatusCode)  
                {  
                    employeeRegisterationResponse = await tokenResponse.Content.ReadAsAsync(new[] { new JsonMediaTypeFormatter() });  
                }  
            }  
            catch (HttpRequestException ex)  
            {  
  
            }  
            return employeeRegisterationResponse;  
        }  
private HttpClient Method_Headers(string accessToken, string endpointURL)  
       {  
           HttpClientHandler handler = new HttpClientHandler() { UseDefaultCredentials = false };  
           HttpClient client = new HttpClient(handler);  
  
           try  
           {  
               client.BaseAddress = new Uri(endpointURL);  
               client.DefaultRequestHeaders.Accept.Clear();  
               client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
               client.DefaultRequestHeaders.Add("apikey", apikey);  
               client.DefaultRequestHeaders.Add("Authorization", "Bearer " + accessToken);  
           }  
           catch (Exception ex)  
           {  
               throw ex;  
           }  
           return client;  
       }  
private string RegisterUserJson(string userName, string password, string firstName, string lastName, string emailAddress)  
       {  
           registerUserJSON =  
               "{"  
                      + "\"RegisterUserInfo\": {"  
                      + "\"username\": \"" + userName + "\","  
                      + "\"password\": \"" + password + "\","  
                      + "\"firstName\": \"" + firstName + "\","  
                      + "\"lastName\": \"" + lastName + "\","  
                      + "\"emailAddress\": \"" + emailAddress + "\","  
               + "},"  
       }";  
  
           return registerUserJSON;  
       }

Thanks & I hope this helps you.