Thanks 2016

I thank each one of you for your support in 2016. It was a great year for me. I have been enjoying evangelism at Infragistics. As part of my job, creating awareness about highly useful Infragistics products among community and customers. Besides my day job, I am very proud to host Angular 2 road show in various Indian cities. So far hosted it in 6 cities and almost 1100 developers attended the full day free workshop on Angular 2.

In 2016, I was able to contribute –

Blog Posts: 27

Workshop/Talk: 19

Webinars: 6

In 2017, I am aspired to work harder and enable more developers for better coding, project and job. If you are from Delhi/NCR region, feel free to join https://www.meetup.com/CodersStreet/ meetup group to get update on my talks or follow me on twitter at  https://twitter.com/debug_mode 

Also Happy 2017  Smile Smile

Communication Between Components Using @Input() in Angular

In Angular 2 a component can share data and information with another component by passing data or events. A component can be used inside another component, thus creating a component hierarchy. The component being used inside another component is known as the child component and the enclosing component is known as the parent component. Components can communicate to each other in various ways, including:

  • Using @Input()
  • Using @Output()
  • Using Services
  • Parent component calling ViewChild
  • Parent interacting with child using a local variable

In this article, we will focus on how a child component can interact with a parent component using the @Input() property. We’ll also look into intercepting the input message and logging changes in the input message.

image

Let us consider the components created in the listing below. We have created a component called AppChildComponent, which will be used inside another component.

We have also created another component called AppComponent. Inside AppComponent, we are using AppChildComponent:

In the above listings, AppComonent is using AppChildComponent, hence AppComponent is the parent component and AppChildComponent is the child component.

Passing data from parent component to child component

Let us start with passing data from the parent component to the child component. This can be done using the input property. @Input decorator or input properties are used to pass data from parent to child component. To do this, we’ll need to modify child AppChildComponent as shown in the listing below:

As you notice, we have modified the greetMessage property with the @Input() decorator. Also, we have implemented onInit, which will be used in demos later. So essentially, in the child component, we have decorated the greetMessage property with the @Input() decorator so that value of greetMessage property can be set from the parent component.

Next, let us modify the parent component AppComponent to pass data to the child component.

From the parent component, we are setting the value of the child component’s property greetMessage. To pass a value to the child component, we need to pass the child component property inside a square bracket and set its value to any property of parent component. We are passing the value of childmessage property from the parent component to the greetMessage property of the child component.

image

Intercept input from parent component in child component

We may have a requirement to intercept data passed from the parent component inside the child component. This can be done using getter and setter on the input property.

Let us say we wish to intercept an incoming message in the child component, and combine it with some string. To achieve this, we created a property called _greetmessage and using @Input() decorator creating getter and setter for _greetmessage property. In the getter, we’re intercepting the input from the parent component and combining it with the string. This can be done as shown in the next listing:

In the setter, we are manipulating incoming data from the parent component and appending some text to that. Keep in mind that the behavior of the parent component would not change whether we are intercepting the message or not. To explore it further, let us take another example and create a child component, which will display names passed from the parent. If the parent passes empty name value, then the child component will display some default name. To do this, we have modified the setter in the child component. In the setter, we are checking whether the name value is passed or not. If it is not passed or it is an empty string, the value of name would be assigned to a default value. The child component can be created as shown in the listing below:

Read full article on the Infragistics blog

Simplifying Two-Way Data Binding in Angular 2

There are three types of data bindings in Angular 2, they are as follows:

  1. Interpolation
  2. Event Binding
  3. Property Binding

If you are coming from Angular 1.X background, you might be wondering that where is the two-way data binding? Remember, when first time you saw AngularJS 1.X demo, and was just blown away by power of ng-model? Yes, like you, I was also very impressed by power of two-way data binding in AngularJS 1. Even though, AngularJS 1 two-way data binding was beautiful, it came with the baggage of digest cycle and $watch.

To simplify the things, Angular 2 does not have any built in Two-Way data binding. It does not mean; you cannot have two-way data binding in Angular 2 application. Come on, we cannot think of creating a modern web application without having power of two-way data binding. So, in this post, we are going to learn, how to work with two-way data binding in Angular 2.

image

Two-way data binding with ngModel

Angular 2 provides us a directive ngModel to achieve two-way data binding. It is very simple and straight forward to use ngModel directive as shown in the listing below:

To use ngModel directive, we need to import FormsModule in the application. For your reference, below I am listing app.module.ts which is importing FormsModule besides other required modules.

In above demo, when typing into the input element, the input’s value will be assigned to name variable and also it would be displayed back to the view. So we are implementing two-way data binding using ngModel as shown in the below image:

image

Two-way data binding without ngModel

To understand ngModel directive working, let us see how we can achieve two-way data binding without using ngModel directive. To do that, we need to use

  1. Property binding to bind expression to value property of the input element. In this demo, we are binding name variable expression to value property.
  2. Event binding to emit input event on the input element. Yes, there is an input event which will be fired whenever user will input to the input element. Using event binding, input event would be bind to an expression.

So, using the property binding and the event binding, two-way data binding can be achieved as shown in the listing below:

Same like ngModel directive demo in this demo also, when typing into the input element, the input element’s value will be assigned to name variable and also it would be displayed back to the view.

So we are implementing two-way data binding without using ngModel using the code shown in the below image:

image

Let us understand few important things here:

  1. [value]=”name” is the property binding. We are binding value property of the input element with variable (or expression) name.
  2. (input)= “expression” is event binding. Whenever input event will be fired expression will be executed.
  3. “name=$event.target.value” is an expression which assigns entered value to name variable.
  4. Name variable can be accessed inside AppComponent class.

So far we have seen two-way data binding using ngModel and without ngModel. We can conclude that the directive ngModel is nothing but combination of property binding and event binding. Event binding is denoted using small bracket and property binding is denoted using square [] bracket, and if you notice syntax of ngModel is [(ngModel)], which is like a banana put into a box suggests it is combination of both event and property binding.

image

Read full article on the Infragistics blog

How to create constants in JavaScript?

Constants are immutable variables which value cannot be changed. Once, you have created a constant, its value cannot be changed.

image

While coding in JavaScript, many times you may have come across a requirement to create constants. Before ECMA Script 6, it was not very easy to create constants in JavaScript. In this post, I will show you to create constants in both ECMA Script 5 and ECMA Script 6.

Constants in ECMA 5

We can create a constant in ECMA Script 5 using Object.defineProperty(). First we need to find out, whether variable would be a global variable or part of the window object. Once that is determined, create variable by setting writable to false.

Object.defineProperty() function takes three parameters,

  1. Object for which variable should be created
  2. Name of the variable to be created
  3. Object to configure behavior of the variable.

Read full article on the Infragistics blog

How to print or enumerate properties of a JavaScript object?

I usually come across the following requirements,

  • How to print name of all the properties of an object?
  • How to print only the methods of an object?
  • How to print even non-enumerable properties of an object?

In this post, we will explore all the options to iterate and print properties of a JavaScript object. Let us consider the object cat, as shown in the listing below:

By default, for all properties of an object enumerable is set to true. So right now, if we print description of cat’s canRun and name properties using the Object.getOwnPropertyDescriptor, we will find enumerable value true for the both properties.

As you notice besides enumerable, configurable and writable are also set to true.

image

Let us start with printing all properties which enumerable is true.

Printing all enumerable properties using for..in loop

We can print all enumerable properties either own or inherited of cat object using JavaScript for..in loop.

Using the for..in loop, all enumerable properties can be iterated. Above for loop will print all the enumerable properties of cat object.

Read full article on the Infragistics blog

Introduction to Angular 2 Components

A component is a main building block of an Angular 2 application, and an application may have any number of components. We can consider a component a particular view of the application with its own logic and data.

In AngularJS 1.0, there was the concept of controllers, $Scope, and directives to bind data and logic to the view or to create custom elements on the view. In Angular 2, components perform all the tasks that were performed by controllers, scopes and directives. Data, logic and custom elements can all be created or added to the page using components in Angular 2.

Angular 2 applications are built around components, and we can consider component as a view with its own:

  • Template
  • Application Data
  • Logic
  • Styles, and more

Let’s Create Our First Component

Let us start with creating a very simple component to display “Hello World” on the page.

appcomponent.component.ts

 

There are mainly three steps to create a component

  1. Create a class and export it. This class will contain data and the logic.
  2. Decorate the class with @component metadata. Basically, metadata describes the component and sets the value for different properties, so that a TypeScript class can be used as an Angular 2 component.
  3. Import the required libraries and modules to create the component.

Three steps discussed above can be visualized in the diagram below:

image

As you can see, the Angular 2 component consists of:

  • A TypeScript Class to hold data and the logic;
  • HTML template and styles to display data in the app. It is also called as a view, which is seen by the user on the screen to interact.
  • Metadata which defines the behavior of a component. Component metadata is applied to the class using the @Component decorator. Different behavior of the component can be passed as properties of the object, which is and input parameter of the @Component decorator.

Read full article on the Infragistics blog

Proud moment- got .NET foundation coin at Microsoft MVP Summit 2016

Microsoft Most Valuable Professional summit is yearly conference for all the MVP from all across the world organized by Microsoft in their Seattle campus. In the MVP Summit 2016, I got .NET foundation coin from none other than ever inspiring Scott Hanselman . Getting .NET foundation coin was a proud moment for me. Now, I am spired to learn and add more values to the developer community all across the globe.

image

Why I got it?

I got it for my contribution to MVC documentation. I contributed to MVC Area topic, you can read that here:

https://docs.asp.net/en/latest/mvc/controllers/areas.html

image

How I contributed?

Contributing to the documentation is super easy. A few months back, I wrote an article about ASP.NET MVC Area and published it on Infragistics blog. Through tweets, Rick Anderson came across the article, and asked me, would I like to contribute to MVC documentation for that particular topic ? For sure, my answer was yes. After that, Rick helped me in contributing and committing to the documentation’s GitHub repository. It took around a week to complete the whole process.

Here is the GitHub repository of the doc : https://github.com/aspnet/Docs/ . You can see last commit by Steve Smith

In MVP Summit

In the MVP Summit 2016, I met Jeff Frtiz and he had my documentation contribution in his mind. So once again, he asked me to send my contribution in his email. I sent, and after sometimes, he walked to me with Scott Hanselmanm, when Scott gave me .NET foundation coin in front of fellow MVPS. It was a proud moment for me.

image

I would like to thank Scoot Hanselman for recognition, and many thanks to Jeff Fritz and Rick Anderson for all help. I am motivated to keep working.

Exploring Attribute Directives in Angular 2

Attribute Directives are used to change the behavior, appearance or look of an element on a user input or via data from the service. Essentially, there are three types of directives in Angular 2:

  1. Component
  2. Structural directives
  3. Attribute directives

image

In this post, we will learn how to create Attribute Directives in Angular 2. So let’s say we want to change the background color of an element; in that case we would apply the attribute directive to the element.

Create first Attribute directive

Let’s start with creating the Attribute Directive. To do this, we need to create a class and decorate it with @directive decorators. A simple attribute directive to change the color of an element can be created as shown in the next listing:

Read full post on Infragistics blog

Recap: Angular 2 Road Trip – Coimbatore

Recap of Angular Road Trip – Ahmedabad

Recap of Angular 2 Road Trip – Gurgaon

Recap of Angular 2 Road Trip – Indore

image

To start with, I thank my employer Infragistics for all support in making these community events, specially Angular 2 road trip successful. We have awesome set of controls for your AngularJS 2, MVC, jQuery etc. application. I request to have a look and please download free trial of Ignite UI here

image

I would like to thank Biztalk 360 for organizing this event. Without their support, it was not possible.

On 15th October, I hosted fourth event of my Angular 2 Road Trip. Read more about Angular 2 here . This time, it was turn of city Coimbatore from South India to show the love for Angular 2 and there were around 90-100 developers attended the event.

image

We started at 11 am with Advanced JavaScript. In this three-hour session, we mainly focused on Objects and Prototypes. At the end of two hours of JavaScript, we came up with below diagram.

image

After JavaScript session , we took the lunch break. And after lunch, we started Angular 2. It was a mixed corwd so, we started slwowly and then moved to advanced topcis of Angular 2.

image

In three hours, we covered following topics in Angular 2,

  • Setting up development environment in VS Code
  • Understanding Bootstrapping
  • Understanding Modules
  • Understanding Components
  • Creating first component
  • Creating Service
  • understanding Routing
  • Performing CRUD operations using http
  • Forms and user input validation
  • Routing

I was very motivated and inspired to do better seeing participations and passion of the people. I must thank each attendee for their support in successfully execution of the event.

image

I would like to thank each attendees and team Biztalk 360 for organizing and making this event successful.

image

Last but not least I would like to thank following inspiring people for their support in making Angular 2 road trip successful.

Brad Green,

Dan Wahlin,

Glenn Block

Geard Sans,

Jaosn Beres ,

Todd Motto

image

Next destination is Bangalore. Thanks everyone.

Recap: Angular 2 Road Trip – Ahmedabad

Recap of Angular 2 Road Trip – Indore

Recap of Angular 2 Road Trip – Gurgaon

image

 

To start with, I thank my employer Infragistics for all support in making these community events successful. We have awesome set of controls for your AngularJS 2, MVC, jQuery etc. application. Please download free trial of Ignite UI here

image

On 18th September, I hosted third event of my Angular 2 Road Trip in Ahmedabad. Read more about Angular 2 here . This time, it was turn of city Ahmedabad and Gandhinagar to show the love for Angular 2 and there were around 180-200 developers attended the event.

image

We started at 10 am with creating API in NodeJS. This one-hour session was taken by local speaker Jinal Shah. Once Jinal completed showing how to create API in NodeJS, I started with functions and objects in JavaScript.

image

In full day I covered the following topics,

  • Setting up development environment in VS Code
  • Understanding Bootstrapping
  • Understanding Modules
  • Understanding Components
  • Creating first component
  • Creating Service
  • understanding Routing
  • Performing CRUD operations using http
  • Forms and user input validation
  • Routing

image

I was very motivated and aspired to do better seeing participations and passions of the people. I must each attendee for their support in successfully execution of the event.

image

I would like to thank everyone who came to attend the event and special thanks to Infosenseglobal for organizing the event.

image

Last but not least I would like to thank below mentioned people for their support in making Angular 2 multi city tour success.

Brad Green, Dan Wahlin, Geard Sans, Jaosn Beres , Todd Motto , Glenn Block

image

Next destination is south India Coimbatore and Bangalore. Thanks everyone.