March 30, 2019April 15, 2019 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Simplifying Angular CLI for beginners

So you want to write your first Angular application, however setting up even a ‘Hello World’ Angular application is not easy. It requires many steps such as:

Setting up a TypeScript compiler, if you choose to use TypeScript
Configuration of Webpack or other module loader
Setting up local web development server
Installing and configuring dependencies
Configuring Unit Test environment
Configuring End to End Test environment
Working with Continuous Delivery
Working with Continuous Integration and many more

You can perform all these tasks manually, but this will require a strong understanding of all these concepts and will make starting a new project very time consuming. To solve this problem, Angular comes with the Angular Command Line Interface (CLI).

Learn more about it here: https://cli.angular.io/

All these tasks are taken care of by Angular CLI, which is a command line tool for creating, testing, and deploying Angular apps. It is recommended to use Angular CLI for creating Angular apps, as you do not need to spend time installing and configuring all the required dependencies and wiring everything together. It provides you with many boilerplates and saves your time.

It uses Webpack to include all the packaging, the loading module, importing functionality, BrowserLink and more. The entire Webpack configuration is done completely by CLI so you don’t have to worry about it. It also configures Jasmine and Karma for unit tests and TypeScript complier to transpile TypeScript file to JavaScript etc. Let us see how we can work with Angular CLI.

Learn full article on the Infragistics blog

December 25, 2018December 25, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Video – Step by Step Component Communications in Angular

In Angular, components communicate to each other to share data such as object, string, number, array or html.

Parent and Child Components can communicate to each other in following ways

@Input()
@Output()
Temp Ref Variable
ViewChild and ContentChild

You can learn about these concepts in step by step video below. If you like the video , do not forget to subscribe to our YouTube Channel for notification about future video tutorials.

You can read articles related to above video here :

Communication Between Components Using @Input() in Angular

Understanding @Output and EventEmitter in Angular

December 18, 2018December 18, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Free Download – Angular Essentials E-Book to help you getting started

Are you new to Angular and just starting with it? Well, I have written a small eBook for you, which you may find useful.

You can download it free from here

This book does not contain everything of Angular. It just contains topic you need to get started with Angular.

In these 10 pages E-Book, you will learn about:

Angular’s basic architecture: NgModules, Components, Templates, Directives, Two-way Data Binding, Services, Dependency Injection, and Routing
Setting up an environment: Downloading Angular with the Angular CLI tool; must have Node.js and npm installed
Components: What you see in the browser. Consists of the following parts: a TypeScript class called the Component Class, an HTML file called the template of the component, and an optional CSS file for styling the component
Data binding: Determines how data will flow in between the component class and component template
Component communication: For sharing data (object, string, number, array, HTML)
Directives: Creating DOM elements and changing their structure or behavior in an Angular application

Download it free from here

As I told you, this book is only 10 pages long and it contains basic minimum you need to get started with Angular. Currently I am writing a complete Angular Essentials Book, send me your feedback and I will try to incorporate them. You can reach me at debugmode[at]outlook[dot]com

I hope you find Angular Essentials Ref Card useful. Thanks!

December 18, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Content Projection in Angular Element with Slot in Angular 7.0

In this article, we will learn how to project content in an Angular Element. If you are unfamiliar with the following,

Shadow Dom
ViewEncapsulation
Content Projection

I recommend you read the articles below before moving forward:

As of now, you know that we use ng-content to carry out content projection as shown in the next listing:

You can also project content as shown in the next listing:

The challenge with the above approach is, “If you use GreetComponent as your Angular Element,” you will not able to project content. To understand this better, let us start with converting GreetComponent to an Angular Element. Here you can Learn Step by Step tp Create Angular Element.

After converting GreetComponent as Angular Element, AppModule should look like the listing below:

Now you can use GreetComponent on index.html as shown in the listing below:

Upon running the application, you will find that the <h2> element has not been projected to the Angular Element GreetComponent.

Read full article on the Infragistics blog

September 4, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Simplifying Angular Data Binding to .NET Developers

Read full article on the Infragistics blog

At my job, I get the opportunity to talk to many .NET developers who want to learn Angular. Often, I’ve seen that they bring their .NET skills and work to map that in the learning of Angular. While the effort and drive to learn is there Angular is not .NET.

Since Angular is a pure JavaScript library, I’ll simplify basic but important concepts of Angular to .NET developers in this post series. In this article, we’ll learn about Data Bindings in Angular. Luckily, Data Binding in Angular is much simpler than in .NET.

First, Let’s revise some of data binding techniques in .NET. For example, in ASP.NET MVC, you do data binding using a model. View is bound

To an object
To a complex object
To a collection of objects

Essentially, in ASP.NET MVC, you do data binding to a model class. On the other hand, in WPF, you have data binding modes available. You can set the mode of data binding in XAML, as follows:

One-way data binding
Two-way data binding
One-time data binding
One-way to source data binding

If you are following MVVM patterns, then you might be using INotifyPropertyChanged interface to achieve two-way data binding. Therefore, there are many ways data bindings are achieved in world of .NET.

Data binding in Angular, however, is much simpler.

If you are extremely new in Angular, then let me introduce you to Components. In Angular applications, what you see in the browser (or elsewhere) is a component. A component consists of the following parts:

A TypeScript class called Component class
A HTML file called Template of the component
An optional CSS file for the styling of the component

Read full article on the Infragistics blog

August 29, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Angular Components: Pass by Reference or Pass by Value?

Read full article on the Infragistics blog

In Angular, you can pass data from parent component to child component using @Input() decorator, and a child component can emit an event to a parent comment using @Output() decorator.

The purpose of this blog post is to explain you whether it is pass by reference or pass by value in context of @Input() and @Output decorator.

To start with, let us assume that we have two components, as listed below:

As you see, we have two input properties.

In data property, we will pass an object.
In count property, we will pass a number.

From the AppComponent, we are passing value for both properties, as shown below:

As you see, we are passing data (object) and count( number) to the child component. Since data is being passed as object, it will be “Pass by Reference” and, since count is passed as number, it will be “Pass by Value”.

Therefore, if passing an object, array, or the like, then it is Pass by Reference, and for primitive types like number, it is Pass by Value.

Read full article on the Infragistics blog

July 11, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Simplifying Different Types of Providers in Angular

An Angular Service provider delivers a runtime version of a dependency value. Therefore, when you inject a service, the Angular injector looks at the providers to create the instance of the service. It is the provider that determines which instance or value should be injected at the runtime in component, pipes, or directives. There are many jargons involved here, so to understand purpose of types of providers, let us start with creating a service. Let’s say we have a service called ErrorService, which is just logging the error message.

Now, we can use this service in a component, as shown in the listing below:

We are importing the service, passing it in the providers array, and injecting it in the constructor of component. We are calling the service method on click of the button, and you can see error message passed in the console. Very simple right?

Here, Angular will rely on the values passed in the providers array of component (or module) to find which instance should be injected at the run time.

“A Provider determines that how object of certain token can be created.”

So, when you pass a service name in providers array of either component or module, like below:

Here, Angular is going to use token value ErrorService and, for token ErrorService, it will create object of ErrorService class. The above syntax is a shortcut of the below syntax:

The provide property holds the token that serves as the key for

1. locating the dependency value.

2. registering the dependency.

The second property (it is of four types) is used to create the dependency value. There are four possible values of second parameter, as follows:

1. useClass

2. useExisting

3. useValue

4. useFactory

We just saw example of useClass. Now, consider a scenario that you have a new class for better error logging called NewErrorService.

useExisting

Now, we want that instead of the instance of ErrorService, the instance of NewErrorService should be injected. Also, ideally, both classes must be implementing the same Interface, which means they will have same method signatures with different implementation. So now, for the token ErrorService, we want the instance of NewErrorService to be injected. It can be done by using useClass, as shown below:

The problem with the above approach is that there will be two instances of NewErrorService. This can be resolved by the use of useExisting.

Now there will be only one instance of NewErrorService and for token ErrorService instance of NewErrorService will be created.

Read full article on the Infragistics blog

July 6, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

Step by Step for Creating Your First Angular Element

Read full article on the Infragistics blog

Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.

We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.

Step 1: Installation

Create a new project using Angular CLI

ng new demo1

Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:

npm install @angular/elements

To work with older browsers, we need polyfill. So, let us install that also as shown below:

npm install @webcomponents/custom-elements

After installing polyfill, open polyfills.ts file and add these two entries:

Continue reading full article on Infragistics blog

June 5, 2018June 5, 2018 Dhananjay Kumar , Microsoft MVP , Trainer and Consultant

High Performance Angular Grid with Web Sockets

Read full article on the Infragistics blog

You may have come across the requirement to push data in real time to an Angular Grid. To push data to the browser, you need a technology called WebSocket. You can implement that using NodeJS or ASP.NET SignalR. For the purpose of this article, we will use Web Sockets with NodeJS.

In the first half of this article, we will create an API which will use Web Sockets to push data to the client, and, in second half of the article, we will create an Angular application to consume that. In the Angular application, we will use Ignite UI for Angular Grid. However, you can also use a simple HTML table to consume data in real time from web socket. In this article, we will learn to consume data in real time from NodeJS Web Socket in a HTML table as well as Ignite UI Angular Data Grid. We will witness difference in performance in these two approaches.

You can learn more about Ignite UI for Angular: here

NodeJS API

Let us start with creating NodeJS API. Create a blank folder and add a file called package.json. In package.json, add dependencies of

Core-js
Express
io

More or less your package.json file should look like below:

You can pull data from any type of database such as relational data base, No SQL database, etc. However, for purpose of this post, I am going to keep it simple and have hardcoded data in the data.js file. This file will export a JSON array, which we will push using web socket and timer.

Add a file in folder called data.js and add the following code in it.

data.js

You can find data with 1200 rows here.

From data.js file, we are returning TradeBlotter data. Now in your project folder, you should have two files: package.json and data.js

At this point in time, run the command, npm install, to install all dependencies mentioned in package.json file. After running command, you will have the node_modules folder in your project folder. Also, add server.js file in the project. After all these steps, your project structure should have following files and folders.

data dot js
server dot js
Node_modules folder

In server.js, we will start with first importing required modules,

Once required modules are imported, add route-using express as below:

app.use(express.static(__dirname + ‘/dist’));

On connecting the socket, we are performing following tasks:

Fetching data
Starting timer(We will talk about this function later in the post)
On disconnect event deleting the socket

Next we have to implement, startTimer() function. In this function, we are using JavaScript setInterval() function and emitting data in each 10 millisecond time frame.

We are calling a function updateData() which will update data. In this function, we are looping through local data and updating two properties, Coupon and Notional, with random number between ranges.

Read full article on the Infragistics blog