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.

Join me in the free webinar on CRUD operations in Angular 2

Infragistics brings you another webinar in India time zone. This time, we are hosting it on 8th September at 3 PM. In this webinar we will cover CRUD operations in Angular 2.

Free register to attend the webinar

In the webinar, we will cover following topics

  • Components
  • Routings
  • Services
  • Forms and Validations

We will use Visual Studio Code as IDE and TypeScript as language to develop the application.

Register here to join the webinar

Also in advance you can download the sample code of the application from the webinar here

https://github.com/debugmodedotnet/angular2basiccrud

Feel free to clone it and play around. Hope to see you in the webinar.

Git command is taking wrong user? To solve – check CredentialManager

Yes, this was a strange scenario for me. I created Angular 2 project in Visual Studio Code and wanted to push the project into a GitHub Repository. Sounds a simple requirement right? So to publish the project to a GitHub Repository, I ran following 5 commands in the order given below:

  1. git init
  2. git add –A
  3. git commit –m “commitmessage”
  4. git remote add origin “Url of GitHub Repo”
  5. git push origin master

For the push command, I got the error as shown in the image below. Focus on error message for user djinfragistics

image

Error message is very clear that user djinfragistics does not have access to the remote repository hence HTTP Error code 403 is returned from the GitHub server.

To check current user name for the project I ran the command

  1. git config user.name
  2. git config user.email

As shown in the image below, I found username and user email was set to the user which had access to remote repository.

image

I was confused and was not able to figure it out that why git command is not taking user from the current project and taking some random user djinfragistics. I thought might be global user is set to djinfragistics. So, to check that I ran the command as below

  1. git config –global user.name
  2. git config –global user.email

As shown in the image below, I found username and user email was set to the user which had access to remote repository.

image

It was strange, that global user is also set to the different user, however to publish project, git was taking some strange user djinfragistics from somewhere.

After bit of researching, I found that on windows when we install git 2, Credential Manager also gets installed. It runs as a daemon process and caches the git user credentials, such that each time we do not have to provide user information to push the changes to GitHub repository.

In my scenario, I might have used djinfragistics username earlier on the same system and that user got cached in Credential Manager. So even though user was set to debugmode, on running the command git was taking user djinfragistics from credential manager.

To check various options, run the command as shown below

  • git credential-manager

Above command will show us all options of credential manager. I was lazy and wanted to publish project as early as possible, so I ran

  • git credential-manager uninstall

image

The above command will uninstall credential manager and we will have to provide git user credential each time. I would recommend you to explore various options and edit the file rather uninstalling it.

It solved my problem and git command started taking correct user name. I hope it helps.

Recap of Angular 2 Road Trip–Gurgaon

 

Reacp of Angular 2 Road Trip Indore 

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 27th Aug, I hosted second event of my Angular 2 Road Trip in Gurgaon.. Read more about AngularJS 2.0 here . This time, it was turn of city Gurgaon to show the love for Angular 2  and there were around 280-300 developers attended the event.

image

You might be wondering that why people are seating on the floor? because I had more attendees than expected. I thought there would be maximum 100- 130 people would join the event. But I was wrong, and around 300 people attended the event. There were no enough chairs for all 300 people, so we removed all the chairs from the hall such that everyone could be accommodated by seating on the floor. I must appreciate passion and learning attitude of each participants that they agreed to seat on the floor for 5-6 hrs. We all sat on the floor for the learning and love of AngularJS 2.0

image

In six hours I covered 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

I also covered basics of JavaScript functions, objects, and inheritance. Attendees were very much involved and fully participated. I used Dan Wahlin AngularJS 2.0 project from GitHub as the starter project and built application on top of that.

image

I was very motivated and aspired to do better seeing participations and passions of people, even though they were seating on the floor for whole days and many of them did not get lunch. I must each attendee for their support in successfully execution of the event.

image

I must also thank Microsoft India, specially Usha Rathnavel for her support in providing us hall, coffee/tea and lunch for the attendees on very short notice. Without her help this event was not possible.

image

Once again I thank each developer who came for the event. Since I am based out of Delhi, aspired to so more such event in Delhi.

image

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

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

Next destination is Ahmedabad J see you there.   You can see more photos of the event on my FaceBook here  and in last group photo is here

image

Thanks everyone Smile