Post navigation

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

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.

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.

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.

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

Create a class and export it. This class will contain data and the logic.

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.

Import the required libraries and modules to create the component.

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

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.

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.

Why I got it?

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

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.

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.

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:

Component

Structural directives

Attribute directives

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:

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

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.

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.

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.

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.

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

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

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

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.

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.

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

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.

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

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

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:

git init

git add –A

git commit –m “commitmessage”

git remote add origin “Url of GitHub Repo”

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

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

git config user.name

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.

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

git config –global user.name

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.

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

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.

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.

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

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.

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.

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.

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.

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