Introduction to Angular Pipes: Simplifying Data Transformation

Angular is a robust front-end framework that empowers developers to create dynamic and interactive web applications. Among its key features lies the concept of 'pipes'. You might be curious about what these 'pipes' are and why they hold significance.

In simple terms, Angular pipes are efficient tools that enable you to modify and format data directly within your HTML templates. They take input data, process it, and then display the transformed data. Think of pipes as filters for your data, making it more presentable and user-friendly.

How Pipes Work: Turning Raw Data into Refined Information

Imagine you have raw data that you want to display on your web page, such as a date, a number, or some text. Often, the raw data isn't in the ideal format for presentation, so you need to process it before showing it to the user. This is where pipes come to the rescue.

Using a pipe is straightforward - you add it to an expression in your HTML template, and Angular handles the rest. The basic syntax for using a pipe looks like this:

{{ data | pipeName }}

Here, 'data' represents the input value you want to transform, and 'pipeName' is the specific pipe you want to apply. Angular offers built-in pipes, like 'DatePipe', 'UpperCasePipe', 'LowerCasePipe', and 'CurrencyPipe', which you can use right away. Additionally, you can create custom pipes for more specialized transformations.

Angular TypedForm: Building Strongly Typed Forms in Angular

Angular is a powerful framework used for developing modern web applications, where forms play a critical role in data processing and user interactions. To ensure a smooth user experience and maintain data integrity, effective handling of form data is essential. Angular provides various mechanisms for form management, and one of the most robust approaches is utilizing Angular TypedForm.

What is Angular TypedForm?

Angular TypedForm is a library specifically designed for Angular that enhances the standard Angular Reactive Forms with strong typing capabilities. This means that you can define your form models using TypeScript interfaces or classes, resulting in more robust and maintainable forms with fewer errors.

Benefits of Angular TypedForm:
1.Type Safety: TypedForm allows you to define the structure of your form data using TypeScript interfaces or classes. By doing so, the form data will adhere to the specified types, preventing runtime errors caused by incorrect data.
2.Code Completion and IntelliSense: Utilizing TypeScript provides the advantage of code autocompletion and IntelliSense in modern code editors. This feature streamlines form development by providing suggestions for available properties and methods of the form model directly from the editor.
3.Refactoring Support: Defining the form model as a TypeScript interface or class makes refactoring more manageable. Any changes, such as renaming or modifying a property in the form model, will be automatically reflected throughout your codebase.

Angular - How to create custom structural directive?

Creating a custom structural directive in Angular allows you to modify the DOM based on certain conditions, extending the template syntax. Structural directives are identified by the asterisk (*) preceding the directive name in the HTML template. Let's go through the steps to create your own custom structural directive in Angular.

Step 1: Set up the Angular project: Ensure that you have Angular CLI installed. If not, you can install it using npm:

npm install -g @angular/cli

Create a new Angular project:

ng new custom-structural-directive-demo
cd custom-structural-directive-demo

Step 2: Generate the directive: Next, generate a new directive using Angular CLI:

ng generate directive customIf

This generates a new directive file named 'custom-if.directive.ts' in the 'src/app' folder.

Angular - An Introduction to Structural Directives in Angular

In post Directive in Angular, we tried to understand what is directive? In this post, we'll explore Structural Directives and understand how they enhance the functionality and flexibility of Angular applications.

What are Structural Directives?

Structural Directives in Angular are a type of directive that modify the layout and structure of the DOM by adding or removing elements based on conditions. Unlike Attribute Directives, which change an element's behavior or appearance, Structural Directives directly impact the DOM's structure. The most commonly used Structural Directives in Angular are 'ngIf', 'ngFor', and 'ngSwitch'.

1. ngIf: The 'ngIf' directive conditionally adds or removes an element from the DOM based on the evaluation of an expression. It proves particularly useful when you need to show or hide specific parts of your template depending on your application's state. Example:

<ng-container *ngIf="isLoggedIn">
  <p>Welcome, {{ username }}!</p>
</ng-container>

In this example, the '<p>' element will only be rendered if the 'isLoggedIn' variable is true.

Angular - Understanding ng-template and ng-content in Angular

In Angular, the features 'ng-template' and 'ng-content' are valuable tools that facilitate the creation of dynamic and reusable components. They significantly contribute to improving code modularity, reusability, and maintainability. Let's explore each of these features to comprehend their importance in Angular development.

1. ng-template:

In Angular, 'ng-template' is a directive that allows the definition of a template block within a component without immediate rendering. It serves as a placeholder for content that can be instantiated later, based on different conditions. Think of it as a blueprint for creating content that will only be activated when explicitly used.

Usage:

<ng-template #myTemplate>
  
</ng-template>

How to use ng-template:

The true power of 'ng-template' comes into play when used in conjunction with other Angular directives such as 'ngIf', 'ngFor', and custom structural directives. For example, with 'ngIf', you can conditionally render content based on specific logic:

Angular - Understanding Directives in Angular

Angular is a widely used front-end framework known for its ability to create dynamic web applications. One of its essential features is directives, enabling developers to extend HTML and build reusable components with customized behavior and functionality. In this post, we'll deep dive into what directives are, the various types available in Angular, and how to utilize them efficiently in your projects.

What are Directives?

In Angular, directives serve as markers on DOM elements, instructing Angular's compiler to attach specific behavior or functionality to those elements. They are instrumental in manipulating the DOM, adding or modifying elements, applying styles, handling events, and more. By using directives, you can extend HTML with your own custom attributes or tags, making your code more expressive and easier to maintain.

Types of Directives in Angular

Angular provides three primary types of directives:

1. Component Directives: Components are the most commonly used type of directive. They are essentially directives that come with an associated template. Components encapsulate the template, styles, and behavior of a specific part of the user interface, acting as reusable building blocks throughout your application.
2. Attribute Directives: Attribute directives modify the behavior or appearance of existing elements or components. They are used as attributes on elements and are denoted by square brackets, such as '[ngStyle]' or '[ngClass]'. Attribute directives are useful for applying conditional styles, enabling/disabling elements, or performing other transformations on elements.
3. Structural Directives: Structural directives modify the DOM's structure by adding or removing elements. They are also used as attributes but are denoted by an asterisk ('*') before the directive name. Some examples include '*ngIf', '*ngFor', and '*ngSwitch'. These directives are commonly employed for rendering lists, conditionally displaying content, and handling template rendering.

Angular - Utilizing the @ViewChild Decorator in Angular for Enhanced Component Interaction

Angular, a robust web application framework, offers developers a vast array of tools and features to boost productivity. One such feature is the @ViewChild decorator, which facilitates the access of child components, directives, or DOM elements within Angular components. In this article, we will explore the capabilities of @ViewChild and delve into its practical applications for interacting with child elements and components in your Angular applications.

Understanding @ViewChild:

The @ViewChild decorator enables developers to obtain references to child components, directives, or DOM elements residing within the template of a parent component. It grants access to properties and methods of the child component, facilitates interaction with the child directive, and allows direct manipulation of the DOM element.

Syntax: The syntax for implementing the @ViewChild decorator is as follows:

@ViewChild(selector, options) propertyName: Type;

1. The selector represents the CSS selector or component class used to identify the child element/component.
2. The options parameter is optional and allows for the specification of additional view query options.

Example 1: Accessing a Child Component

Let's consider a scenario where we have a parent component, ParentComponent, that includes a child component named ChildComponent. To access the child component from the parent component, we can utilize the @ViewChild decorator as illustrated below:

Angular - Understanding @Input and @Output Decorators

Angular is a widely-used framework for creating web applications, offering powerful features for component-based development. Two important decorators in Angular are '@Input' and '@Output'. These decorators facilitate communication between components. In this post, we'll explore these decorators and learn how to utilize them effectively.

@Input Decorator

The '@Input' decorator is employed to define an input property on a component, enabling the flow of data from a parent component to a child component. By utilizing '@Input', you can bind values to properties within a child component, allowing for dynamic data exchange.

To define an input property, simply add the '@Input()' decorator above the property declaration within the child component. Here's an example:

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

@Component({
  selector: 'child-component',
  template: `Child Component: {{ childProperty }}`
})
export class ChildComponent {
  @Input() childProperty: string;
}

Understanding Attributes and Properties in HTML

When working with HTML, it's crucial to understand the concepts of attributes and properties.The terms "attribute" and "property" can be confusing in HTML. In the Angular framework, there are concepts called Property Binding and Attribute Binding, and understanding the difference between the two is important.

The main difference between attributes and properties is as follows: attributes are related to HTML, while properties are related to the DOM (Document Object Model). In HTML, we only have attributes, not properties. Similarly, in the DOM, we only have properties, not attributes.

Attributes in HTML:

Attributes are characteristics or metadata that we assign to HTML elements. They provide additional information about an element, defining its behavior, appearance, or specific details. Attributes are placed within the opening tag of an element and are written as name-value pairs. The attribute name represents its purpose, while the value specifies the particular setting.

Example of an attribute:

<a href="https://www.example.com">Click here</a>

In the above example, the "href" attribute is used to define the destination of the hyperlink. The attribute value is set to "https://www.example.com" indicating the URL the link should navigate to.

Properties in HTML:

Properties, on the other hand, are characteristics of HTML elements that can be accessed and manipulated using JavaScript. Unlike attributes, properties are part of the Document Object Model (DOM), which represents the web page as a structured tree of objects. Properties enable developers to dynamically modify element behavior and content through scripting.

Angular - Understanding the Attribute Binding

Angular, a robust JavaScript framework, empowers developers to build dynamic and interactive web applications. Among its key features, attribute binding stands out, enabling the manipulation of HTML attributes within Angular components. In this blog post, we'll dive into AnAngulargular attribute binding, exploring its usage, syntax, and practical applications.

Understanding Attribute Binding:

Attribute binding in Angular provides a means to dynamically set or update attribute values of HTML elements. It allows for the binding of component properties to HTML attributes, enhancing application flexibility and responsiveness. Attribute binding works with any HTML attribute, including standard ones like 'src', 'href', and 'disabled', as well as custom attributes.

Syntax and Usage:

Attribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot.

Angular - Simplifying Data Flow in Angular Applications with Property Binding

Property binding in Angular application allows developers to establish a connection between the properties of HTML elements and the data in a component, enabling smooth data flow and dynamic updates within an Angular application. In this blog post, we will explore the concept of Angular property binding, its syntax, and how it can enhance your development workflow.

Understanding Property Binding:

Property binding in Angular enables you to bind data from a component to properties of HTML elements, such as attributes, properties, and events. It offers a convenient way to update these properties dynamically based on changes in the component's data.

With property binding, you can create interactive and responsive applications by passing data between components and templates. This bidirectional flow allows you to manipulate data in the component and instantly reflect the changes in the template.

Syntax and Usage:

To use property binding in Angular, you enclose the desired property within square brackets ('[]') on the HTML element. The expression within the brackets is evaluated and assigned to the specified property. Let's look at a simple example:

<input [value]="name">

In the above example, we bind the 'value' property of the 'input' element to a property named 'name' in the component. Whenever the 'name' property in the component changes, the corresponding value in the input field is automatically updated.

You can also bind to other properties like 'src', 'href', 'disabled', and more. Property binding is not limited to HTML attributes alone; you can also bind to properties of custom Angular directives and components.

.NET Core - Understanding Scoped, Transient, and Singleton Lifetime

Scoped, Transient, and Singleton are three lifetime options available in .NET Core for registering and managing services within the dependency injection container. Understanding these options is crucial for building scalable and maintainable applications. Let's explore each of them:

1. Transient Lifetime:

   A transient service is created each time it is requested from the dependency injection container. This means a new instance is created for every resolution. Transient services are suitable for lightweight and stateless components that don't require shared state. For instance, if you have a service that performs simple calculations or generates random numbers, using the transient lifetime is appropriate.

   To register a transient service in .NET Core, you can use the 'AddTransient' method during service registration:

   services.AddTransient<ITransientService, TransientService>();

Understanding the Use, Run, and Map Functions for Middleware in .NET Core

Introduction:

Middleware plays a vital role in handling and processing HTTP requests within a .NET Core application's request pipeline. It enables developers to customize and extend the application's behavior. In this post, we will delve into three crucial functions used for configuring middleware: Use, Run, and Map.

1. Use:

   The Use function is extensively used when configuring middleware in .NET Core. It allows the addition of middleware components to the request pipeline. This function accepts a delegate or a middleware class as a parameter. The delegate or middleware class is responsible for processing an HTTP request and generating an appropriate response.

   Consider the following example that demonstrates the Use function in adding custom middleware:

   public void Configure(IApplicationBuilder app)
   {
       app.Use(async (context, next) =>
       {
           // Perform some logic before the request reaches the next middleware
           await next.Invoke();
           // Perform some logic after the request has been processed by subsequent middleware
       });
       // Add more middleware components using the Use function if necessary
   }
   

Middleware in .NET Core: A Developer's Guide

Introduction:

Middleware plays a vital role in web development, and having a clear understanding of its concept and implementation is crucial for .NET Core developers. Middleware acts as a bridge between incoming requests and outgoing responses in an application, enabling developers to customize and extend the request-processing pipeline. In this article, we will explore the world of middleware in .NET Core, discussing its significance, usage, and providing practical examples.

Understanding Middleware:

In the context of .NET Core, middleware refers to a software component or a set of components that are executed sequentially to process HTTP requests and responses. It forms a chain of components that intercept requests, perform specific actions, and pass control to the next component in the pipeline. Middleware empowers developers to add, remove, or modify behavior at various stages of request processing without altering the core application code.

Middleware in .NET Core:

In .NET Core, the request pipeline is constructed using middleware components. It comprises a series of middleware components that receive an incoming HTTP request and pass it along until a response is generated. Each middleware component can inspect, modify, or terminate the request pipeline.

Middleware components in .NET Core are represented by classes that implement either the IMiddleware interface or the RequestDelegate delegate. The IMiddleware interface provides a convenient way to encapsulate middleware logic, while the RequestDelegate delegate offers finer control over middleware behavior.

Angular CLI and Essential Commands for Efficient Development

Angular CLI (Command Line Interface) is a powerful tool that aids in the streamlining of Angular development by automating various tasks and providing a standardized project structure. In this post, we will explore the Angular CLI and highlight some of the most useful commands that can enhance your productivity as an Angular developer.

1. Installation: To begin using Angular CLI, ensure that you have Node.js installed on your system. Once Node.js is installed, open your terminal or command prompt and execute the following command to install Angular CLI globally:

   npm install -g @angular/cli
   

   This command installs the CLI tool globally, making it accessible as a command-line tool.
2. Creating a New Angular Project: Angular CLI simplifies project creation through a straightforward command. To create a new Angular project, navigate to your desired directory in the terminal and execute the following command:

   ng new my-angular-app
   

   This command generates a new Angular project named "my-angular-app" and sets up the necessary files and dependencies.

Angular Trackby to improve ngFor Performance

Do you utilize ngFor in Angular to iterate over arrays or collections? If that's the case, you might have come across performance issues or unexpected behavior when updating or deleting items. But fret not! Angular offers a practical solution known as trackBy that can greatly enhance the performance and stability of your ngFor loops. Let's delve into it and learn how to effectively use it.

The Challenge

By default, Angular employs the index of each item in an array to track changes in ngFor loops. This implies that if the array's order changes or items are added or removed, Angular will re-render the entire list. Such a scenario can lead to performance bottlenecks, particularly when dealing with large arrays or complex components within the loop.

The following example shows what happens when we refresh the entire list. The App displays the list of names. it has option to add a name, remove a name and refresh the entire name list.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  names = new Array<string>();

  name: string = '';

  ngOnInit() {
    this.Refresh();
  }

  remove(i: number) {
    this.names.splice(i, 1);
  }

  addMovie() {
    this.names.push(this.name);
    this.name = '';
  }

  Refresh() {
    console.log('refresh');
    this.names = ['Manish', 'Rahul', 'Ashish', 'Aditya', 'Rohan'];
  }
}

HTML

<p>App Component</p>
<ul>
    <li *ngFor="let name of names; index as i">
        {{i}}. {{name}} <button (click)="remove(i)">remove</button>
    </li>
</ul>

<button (click)="Refresh()">Refresh>/<button> <br/>

Name : <input type="text" [(ngModel)]="name">
<button (click)="addMovie()">Add Name</button>

Angular - @HostBinding and @HostListener

Today, let's explore two powerful decorators in Angular: @HostBinding and @HostListener.The HostBinding and HostListener are decorators in Angular. HostListener listens to host events, while HostBinding allows us to bind to a property of the host element.

These decorators allow us to enhance the behavior of a component by interacting with its host element. Let's understand how they work and how we can effectively use them.

HostElement

The host element is the element on which we attach our directive or component. Remember components are directives with a view (template).

@HostBinding

The @HostBinding decorator enables us to bind a class property to a property of the host element. This way, we can dynamically modify the properties of the host element based on changes in our component's logic.

By utilizing this decorator, we can seamlessly update attributes, classes, or styles of the host element. Let's take a look at an example to illustrate the usage of @HostBinding:

import { Directive, HostBinding, OnInit } from '@angular/core';
@Directive({ selector: '[hostBindingExample]' })
export class HostBindingExampleDirective implements OnInit {
  @HostBinding('style.border') border: string = '';

  ngOnInit() {
    this.border = '5px solid green';
  }
}

In the above code snippet, hostBindingExample directive, uses the HostBinding on style.border property of the parent element to the border property.Whenever we change the value of the border, the angular will update the border property of the host element.

Angular- Directive to Allow Number Only in Input Textbox

In this post, we will create a directive which will allow only numbers to input textbox. User will not allow to enter any other value, only numbers.

Below is the code of directive which will check the input value and allow if the input value is number-

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

@Directive({ selector: '[allowNumberOnly]' })
export class AllowNumberOnly {
  readonly NUMBER_REGEX = '^[0-9]';
  @HostListener('keypress', ['$event'])
  onKeyPress(event: any): boolean {
    if (!new RegExp(this.NUMBER_REGEX).test(event.key)) {
      return false;
    }
    return true;
  }
}

To use the directive in application, we need to add the directive under declarations array of App Module file.

Basics of Web API- HTTP

Hyer-Text Transfer Protocol(HTTP)

• HTTP(Hyer-Text Transfer Protocol) is a communication protocol on the web that is used to transmit data.
• Extensible using Headers to send/receive extra information
• Stateless, doesn’t maintain state unless using HTTP cookies to maintain the communication session or state.

HTTPS

S stands for secure, which means communication between client and server will happen via a secure channel using SSL\TLS encryption protocol.

TLS is the successor of SSL. TLS v1.3 is the latest version. The minimum recommended version of TLS is TLS v1.2, which the website should use to maintain a secure website.

HTTP Request Methods

1. GET-Used to retrieve data. We can pass the parameter via query string to retrieve data based on the parameter.
2. POST-Used to submit data within request body. This is usually used to pass personal or confidential data.
3. PUT-Used to edit record to resource server without creating new record.
4. DELETE-Used to delete a record in resource server.

Other methods are PATCH, OPTIONS, HEAD, TUNNEL, TRACE.

Content Types

1. Plain-Data will be sent ‘as-is’ in plain text without any encryption, serialization or encoding.
2. json-Data will be serialize in JSON format when sent from POST or PUT request body.
3. form-url-encoded-This is represented as key-value pair of request parameter that are sent as request body.
4. form-data-Used when uploading form fields that includes file upload. It uploads data in multiple parts. Use it when sending binary or large payload.

Angular - Bind Route Info to Component Inputs (Angular16)

In building Angular application,most of the time we use the Router to render different pages for different urls, and based on the url we also load the data based on its path parameters or query parameters.

In the latest version of Angular v16, we will get a new feature that will simplify the process of retrieving route information in the component and make it way easier.Now we can bind route parameters to the corresponding component’s inputs

You can pass the following data to a routing component’s inputs-

1. Route data — resolvers and data properties
2. Path parameters
3. Query parameters

We will be able to pass the route information to the component inputs, so we don’t need to inject the ActivatedRoute service anymore.

Below are some examples-

Route data — resolvers and data properties

// Routes
const routes: Routes = [
  {
    path: 'about',
    component: MyComponentComponent,
    resolve: { elementId: () => 'elementId1' },
  },
];
// Component Code
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent implements OnInit {
  @Input() elementId: string = ''; //this will come from the resolved data
  ngOnInit(): void {
    console.log(this.elementId); // get elementId here
  }
}

Angular- Required Component Inputs in Angular16

Angular16 has introduced a new feature to define the inputs as required for component and directives. We can now specify that a component or directive requires certain inputs to function properly.

By using this new feature, we can insure that all necessary data is present before the component or directive logic/functionality executed, resulting better code quality, fewer errors. To use it we can set the new required option in our input:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent {
  @Input({ required: true }) elementId: string;
}

There will be a compilation error if the consumer doesn’t initialize this input:

Default values for lambda expressions - C#12

In C#12, you can now define default values for parameters on lambda expressions. The syntax and rules are the same as adding default values for arguments to any method or local function.For example:

var addWithDefault = (int addTo = 2) => addTo + 1;
addWithDefault(); // 3
addWithDefault(5); // 6

Prior to C# 12 you needed to use a local function or the unwieldy DefaultParameterValue from the System.Runtime.InteropServices namespace to provide a default value for lambda expression parameters.

Using directives for additional types - C#12

C# 12 extends using directive support to any type.Now you can use the using alias directive to alias any type, not just named types. That means you can create semantic aliases for tuple types, array types, pointer types, or other unsafe types. Below are few examples :

using Measurement = (string, int);
using PathOfPoints = int[];
using DatabaseInt = int?;

You can now alias almost any type. You can alias nullable value types, although you cannot alias nullable reference types.

Primary Constructor - C# 12

Primary constructor allows you to add parameters to calss declaration itself and use these values in class body. Promary constructor was introduced for records in C#9. C#12 extends it to all classes and structs.

Enable Preview Version In Visual Studio 2022

To enable the preview version in Visual Studio 2022, follow the below steps-

1. Run the Visual Studio Installer as Adminitrator.
   
2. When installer window open, go to More > Update Settings :
   

Angular- Event Binding

In Angular, events are handled by using the following syntax-

(event name)="event handler method"

For example-

Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.

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

@Component({
  selector: 'app-root',
  template: '',
})
export class AppComponent {
  onShow() {
    console.log('Show button clicked!');
  }
}

.Net Core- Integrates OpenAI ChatGPT APIs in .Net Core Web Api

ChatGPT is a natural language processing model created as an AI-powered chatbot. It is designed to help customers interface with businesses more efficiently and effectively, providing human-like responses in real-time. The model is trained to recognize the context of customer requests, understand the content of conversations, and generate answers to customer queries.

By integrating ChatGPT with our .Net Core Web Api, we can elevate our aplication’s capabilities and provide users with a more interactive experience.

Here we are going to see the step-by-step integration of OpenAI’s ChatGPT APIs into .Net Core Web API.

Signup for an OpenAI API Key

To use the OpenAI’s ChatGPT APIs in your .Net Core Web Api, the first step is to signup for API Key. Go to OpenAI website and create your account by providing your details like name, email address and password.Once you have created your account, create your API key as shown below-

Its important to keep your API key safe and secure, as it provides access to use OpenAI’s ChatGPT APIs. Once you have your API key, you are ready to move on to the next step.

Angular- HTML Template in Angular Component

 In Angular Component post, we have seen that a component consists HTML template, component class, and Metadata. In this post we will see the HTML template in detail-

Html template is nothing but regular Html code with some additional Angular syntax to communicate with the component class.

Angular API interprets the HTML template of a component and generates the HTML and renders it. We can declare the HTML template of a component in two ways-

• Inline Template
• Linked Template

Angular- Component LifeCycle

In Angular, a component instance has a lifecycle that starts with instantiating the component class and rendering the view with its child view.

The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed.

The sequence of Lifecycle events

After the application instantiates a component or directive by calling its constructor, Angular calls the hook methods you have implemented at the appropriate point in the lifecycle of that instance.

Angular executes hook methods in the following sequence.

Respond to Lifecycle Events

Respond to events in the lifecycle of a component or directive by implementing one or more of the lifecycle hook interfaces in the Angular core library.

Angular- Component

Angular is a framework for developing SPA applications. A SPA application view is made of one or more components. A component represents the view in the Angular application.

Components are the main building block for any Angular application. Each component consists of the following: 

1. HTML template that declares what renders on the page 
2. A TypeScript class that defines the behavior
3. Component Metadata

HTML Template

HTML template is nothing a regular HTML code with angular-specific syntax to communicate with the component class.

Angular - Development Setup

Angular is a JavaScript framework for building web applications. It is maintained by Google and is widely used for creating dynamic single-page applications (SPAs) and complex user interfaces.

In the last post, we get a brief introduction to Angular. In this post, we will follow the steps to set up a development environment for Angular.

1. Install Node.js and npm- Node.js is a runtime environment that allows you to run JavaScript code outside of a web browser. npm is a package manager for Node.js that allows you to install and manage packages and dependencies for your project. To install Node.js and npm, go to the official Node.js website and download the installer for your operating system. Once downloaded, run the installer and follow the on-screen instructions.
2. Install Angular CLI- Angular CLI is a command-line interface tool that helps you create, manage, and deploy Angular projects. To install Angular CLI, open a terminal or command prompt and run the following command-

   npm install -g @angular/cli

Angular- Introduction

What is Angular?

Angular is a JavaScript framework for building web applications. It is maintained by Google and is widely used for creating dynamic single-page applications (SPAs) and complex user interfaces.

Angular provides some powerful features such as two-way data binding, dependency injection, directives, and services that make it easy to build robust and scalable applications.

Below are some features Angular provides-

1. Component-based architecture- Angular is based on a component-based architecture, which allows developers to create reusable, modular components that can be quickly composed into larger applications.
2. Two-way data binding- Angular provides two-way data binding, which allows changes made to the model to be automatically reflected in the view and vice versa. This eliminates the need for complex event handling and makes it easier to keep the view and model in sync.
3. Dependency Injection- Angular's dependency injection system makes it easy to manage dependencies and reduce coupling between components. This helps to improve the maintainability and testability of the application.

Single Page Application (SPA)

What is Single Page Application (SPA)?

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates its content as the user interacts with the application, without requiring a full page reload. 

This approach is different from traditional web applications, where clicking on a link or button would cause the browser to request a new page from the server, which would then be rendered in the browser.

Angular Reactive Form - File validators for File Upload

File upload fuctionality is a very common use case in applications. Whenever we allow users to upload files to server, we should have both client side and server side validation. Most likely we validates file size and file extension.
In this post, we are going to see the validators for File Upload functionality in Aangular Reactive Form.

file-validations.ts

In file-validations.ts, we have three validators- FileExtension validator, FileMaxSize validator and FIle Minimum size validator.

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
const FILE_MAX_SIZE = 2048;
const FILE_MIN_SIZE = 1024;
export class FileValidations {
  public static fileExtensionValidator(
    acceptedExtensions: string[]
  ): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value) {
        const ext = control.value.split('.').pop();
        if (!acceptedExtensions.includes(ext)) {
          return {
            fileExtension: {
              acceptedExtensions: acceptedExtensions,
              actualExtension: ext,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMaxSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) > FILE_MAX_SIZE) {
          return {
            fileMaxSize: {
              requiredSize: `${Math.round(FILE_MAX_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMinSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) < FILE_MIN_SIZE) {
          return {
            fileMinSize: {
              requiredSize: `${Math.round(FILE_MIN_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
}

ASP.Net MVC - Multiple Models in Single View - Part2

In last post, we have talked about different approaches to pass the multiple models in single view. We have also looked some of them like Dynamic,View Data and View Bag.

This post is the continuation of previous post. Here we will see the use of ViewModel,Tuple and ViewComponent for passing multiple model in single view . Let's first see what was our problem statement-

Problem Statement

We have two models Student and Course and we need to show the the list of Students and Courses in a single view.

Below are the model definition for Student and Course

public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }       
}

public class Course
{
    public int CourseID { get; set; }
    public string CourseName { get; set; }
}

Solutions to achieve

Here we will see ViewModel,Tuple and ViewComponent to achieve our requirement

1. View Model

ViewModel is a class which contains the properties which are represented in view or represents the data that we want to display on our view.

If we want to create a View where we want to display list of Students and Courses then we will create our View Model (StudentCourseViewModel.cs).

ASP.Net MVC - Multiple Models in Single View - Part1

In MVC we cannot use multiple model tag on a view. But Many times we need to pass multiple models from controller to view or we want to show data from multiple model on a view. So In this post we will see the different ways to bind or pass the multiple models to single view.

Problem Statement

Lets suppose we have two models Student and Course and we need to show the the list of Students and Courses in a single view.

Below are the model definition for Student and Course

public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }       
}

public class Course
{
    public int CourseID { get; set; }
    public string CourseName { get; set; }
}

Below is the Repository class which have two method for returning the list of Students and Courses

public class Repository
{
    public static List<student> GetStudents()
    {
          return new List<student>{ new Student() { StudentID = 1, StudentName = "Manish" },
                 new Student() { StudentID = 2, StudentName = "Prashant" },
                 new Student() { StudentID = 3, StudentName = "Deepak" }
                 };
     }
     public static List<course> GetCourses()
     {
          return new List<course> {
                 new Course () {  CourseID = 1, CourseName = "Chemistry"},
                 new Course () {  CourseID = 2, CourseName = "Physics"},
                 new Course () {  CourseID = 3, CourseName = "Math" },
                 new Course () {  CourseID = 4, CourseName = "Computer Science" }
                 };
     }
}

Deserialize XML to C# object

In this post we will see the simple approach to deserialize XML to C# object.

Our XML String

string xmlString = "<Students><Student><Id>1</Id><Name>Manish Dubey</Name></Student><Student><Id>2</Id><Name>Pankaj</Name></Student></Students>";

Create our class

public class Student
{
  public int Id { get; set; }
  public string Name { get; set; }
}

Create XML Serializer and StringReader Object

//First argument is type of object and second argument is root attribute of your XML string/source

  XmlSerializer serializer = new XmlSerializer(typeof(List<student>), new XmlRootAttribute("Students"));
  StringReader stringReader = new StringReader(xmlString);

At last, deserialize XMl to C# object

List<student> studentList = (List<student>)serializer.Deserialize(stringReader);

Output

Add caption

ASP.Net MVC - Custom Model Binding

In last article, we have discussed about what is ASP.NET Model binding and saw a basic introduction to the Model Binder. In this post we will see creating Custom Model Binding in ASP.Net MVC with simple example.

Model Binder in ASP.NET MVC

For model binding MVC uses the following types-

IModelBinder interface - This defines methods that are required for a Model Binder, like the BindModelAsync method. This method is responsible for binding a model to some values using ModelBindingContext

IModelBinderProvider interface - This interface contains methods that enables dynamic implementation of model binding for classes which implement the IModelBinder interface. This is used to manage the custom binder for the type of data posted by the end-user in views.

Creating Custom Model Binder

We creating our custom model binder by implementing the IModelBinder and IModelBinderProvider interfaces. Let see how we will do that.

Note :I have used ASP.Net MVC Core project here.All the codes are in ASP.Net MVC Core.

ASP.Net MVC Model Binding

Model Binding

What is Model Binding?

Model Binding in ASP.Net MVC maps the data from HTTP request to action method parameters. These parameters may be simple types such as string, integer or they may be complex type. It is a great feature as it relieves developer from writing all the type casting and “HTML-Model mapping code”. The Model binder is capable of retrieving the data from HTML form variables, POSTed variables and files, query string parameters and the values added in the routes.

How model binding works?

When MVC receives HTTP request, it routes the request to a specific action method of a controller. It determines which action method is going to execute based on what is in the route data, then it maps values from the HTTP request to action method’s parameter(s). For ex. Consider the below URL-

http://abc.com/books/edit/2

ASP.NET 4.5 Architecture

Request Processing 

1. IIS gets the request
2. Looks up a script map extension and maps to aspnet_isapi.dll
3. Code hits the worker process (aspnet_wp.exe in IIS5 or w3wp.exe in IIS6)
4. .NET runtime is loaded
5. IsapiRuntime.ProcessRequest() called by non-managed code
6. IsapiWorkerRequest created once per request
7. HttpRuntime.ProcessRequest() called with Worker Request
8. HttpContext Object created by passing Worker Request as input
9. HttpApplication.GetApplicationInstance() called with Context to retrieve instance from pool
10. HttpApplication.Init() called to start pipeline event sequence and hook up modules and handlers
11. HttpApplicaton.ProcessRequest called to start processing
12. Pipeline events fire
13. Handlers are called and ProcessRequest method is fired
14. Control returns to pipeline and post request events fire

SQL : Sql Query Execution Order

Most programming languages executes set of statements from Top to Bottom but SQL Server executes set of statements in a logical order which is uniquely decides by the SQL Server in a predefined order known as Logical Query processing phase.

Introduction

When we are developing an application our concern mostly related to the code optimization which enhances the performance of application. When we are talking about an application it has broadly divided into two part one is the our code written in any programming language and other is the code written in database which executes at database level and return the results to our application.
In real world most application facing the performance issue which can be improved by code optimization. Here we will talk about the SQL query optimization.Most programming languages executes set of statements from Top to Bottom but SQL Server executes set of statements in a logical order which is uniquely decides by the SQL Server in a predefined order known as Logical Query processing phase.

C# : What is New in C# 6.0?

In this post we will see the newly added features in C# 6.0. In C# 6.0 some very cool features has been added like "Auto-property Enhancements", "Primary Constructors", "Expressions as Function Body", "Use of Static", "Exception Filters", "inline declarations", "nameof Expressions", "Null-conditional Operators", "String interpolation", "Await in catch and finally".

Introduction

Here, you will find nine new cool features of C# 6.0:

1. Auto-property Enhancements
2. Parameters on Classes and Structs
3. Using Static
4. Exception Filters
5. Null-conditional Operators
6. Index Initializers
7. $ sign
8. String Interpolation
9. nameof Expression
10. Await in catch and finally block

Backbone.js – Basic Understanding of Model

Backbone.js Models

When we talk about MVC pattern, Model becomes very important part of this. It is the Model which contains application data. The authors of backbone.js have quite a clear definition of what they believe the model represents in Backbone.js.

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

What we have till now- 

In my last post Backbone.js, We have created a HTML page named main.html in which we had included the required script files. Let's create a new js file main.js and includes this file in our main.html page.

<HTML>
 <Head>
  <title>Backbone js Tutorial</title>
 </Head>
 <Body>

  <script src="scripts/underscore-min.js"></script>
  <script src="scripts/jquery-1.11.3.min.js"></script>
  <script src="scripts/backbone-min.js"></script>
  <script src="scripts/main.js"></script>
 </Body>
</HTML>

Bacbone.js - An Introduction

What is Backbone.js ?

Backkbone.js is a JavaScript library that let us create Single-Page Applications (SPAs) in structured manner. Backbone.js is based on Model-View-Controller (MVC) design pattern. It is suitable for creating Single-Page Applications (SPAs) using RESTful services for persisting data.

Components in Backbone.js-

Unlike traditional MVC which have three components, Backbone has following main components-

• Model
• View
• Collection
• Routers

Difference between Stored Procedures and User Defined Functions in SQL Server

Stored Procedure
Stored Procedures are pre-compile objects which are compiled for first time and saved, which executes (compiled code) whenever it is called. Stored procedure does not necessarily return data, but it can return more than one result set. It can be used to affect data (update/insert/delete), can have transactions, can have error handling, do not have restrictions about non-deterministic functions, and can call other stored procedures.

User Defined Function
User defined function is compiled and executed every time when it is called. Function attempts to return something, always, and has several restrictions - for example, you can't use DML statements, call stored procedures, call NEWID(), etc. You also cannot have error handling, transactions, or non-deterministic functions (e.g. GETDATE() in SQL Server 2000).

Differences :

• Stored procedures compiled first time and reuse the execution plan when next time called while function compiled every time when called.
• Stored procedure can have input parameter as well as output parameter while user defined function can have only input parameters.

Conversion of Decimal to Binary in C#

In interviews, there are some programming questions which you will find most of the places like Write a program to reverse the string or Write a program to check string are palindrome or not etc..

In this post, I have a picked a question from that type of programming questions i.e.

Write a program for converting the decimal value to binary value?

Below is the simple method for converting a decimal value into binary value  :

Code Snippet

---

/// <summary>
/// Method for converting Decimal to Binary
/// </summary>
/// <param name="_value">integer value</param>
/// <returns></returns>
static string DecimalToBinary(int _value)
{
  string strBinary = string.Empty;
  while (_value >= 1)
   {
     strBinary = (_value % 2).ToString() + strBinary;
     _value = _value / 2;
   }
   return strBinary;
}

Creating Batch file to Start and Stop the Window services

Windows  services are a very important part of windows environment. We can easily change the windows environment by stopping or starting the services, for example boost the system performance by stopping the multiple services during game playing.

Warning: Manipulating windows services can have some unwanted effects on your system. You should create a system restore point before experimenting.

We can easily changed the service state by creating batch file(.bat) having batch commands for start or stop the service. The important commands are the following-

•  Net Stop- For stopping the service.
• Net Start- For Starting the service.

Note:-The batch file will need to be run as administrator.

For Example, I have taken the "Print Spooler" service to start through the batch file. Service name of "Print Spooler" service is "Spooler".