How to add class in react conditionally

During initial day of react coding, all of us must stuck with the question how to add class in react conditionally. One often requires to add class in react DOM element based on some condition. Adding cladd using conditional operator is an very easy way to add class in react conditionally like this.

  In above code, hide class will be added when this.state.showLoading value will be set to false.  

Continue Reading

How to rename a git branch

Git branching is very essential feature when you are working in a team and different team member are handling different features. There are some instances when you might have to rename branch  like   When got a better branch name that you already assigned…..ha ha!!!. Your manager wants that feature to reinvent with new strategy. Some other reasons of yours. If you want to rename a branch while you are on any other branch.

If you want to rename the current branch, you are on.

In case of any query, comment below.   Also Read: How do I …

Continue Reading

Ignoring Files and Folders using GitIgnore

When you are using Git for CVS,  you will never want to push unnecessary file to your remote. These file maybe your editor configuration files, dist directory, node modules etc. For this purpose, git check a .gitignore rules before pushing changes  to server. In short, you can define the rules for Ignoring Files and Folders which you want to exclude from git. .gitignore Specifies intentionally untracked files to ignore.   Each line in gitignore file specifies a pattern. Files already tracked are not affected by gitignore. You can also add comment in gitignore by putting # at start of line. …

Continue Reading

Looping an Array In JSX – React JS

When you already have working experience on any of the tempting engines or framework which provide looping DOM functionality, you want it to be everywhere. As you already know, we have ng-repeat in Angular 1, *ngFor in Angular 2 etc, Likewise in React js which use JSX for templating, you can use the following method to Looping In JSX Array element.

  Output: Sahil Jake Jon Thruster Note: Looping In JSX might give you following error: Error : Each child in an array or iterator should have a unique “key” prop. You can clear above error by providing a unique …

Continue Reading

Error: Multiple instances of services

When you are working in Angular 2, you might got stuck in a situation where Angular 2 is creating multiple instances of your service. In Angular 2, Service are singleton object which can be used to fetch and push data from multiple components. First of all, try to understand that you only need to add your service once either in @NgModule or AppComponent(Top level component).

If you define your service in both of NgModule & AppComponent provider array than in that case 2 instances of that service will get created. Also Read: execute function inside template – Angular …

Continue Reading

execute function inside template – Angular 2

In Angular 2, You might wanna execute function inside template, that’s what i am gonna help you guy’s quickly. In Angular 2, Simple template interpolation can be done as follow:

Now what if you simply wanna print “NA” if no value corresponding to above interpolation exist. In that case you can either write a function which take above value and return required result as follow:

Now, you can change above template simply as follow:

In above template, i have applied evalDataFields() inside interpolation.  That’s it for this short Q&A… Happy coding…:)    

Continue Reading

Angular 2 attribute binding

Like class binding, style binding etc, there is also a concept of Angular 2 attribute binding. By using attribute binding you can add data-attribute to element with value as either string or propertyName. In order to understand attribute binding, let’s consider an very simple example.

Above Template will be evaluated as: <div count=2>content</div> This is direct expression interpolation within attribute binding. Other way is too pass propertyName which will finally leave the value of property as value of attribute name as shown below:

Above template will be evaluated as: <div count=10>content</div>

Continue Reading

Toggle class on click in Angular 2

This article will explain about how to toggle class on element click event. This is very easy stuff to do in angular. Below is the basic component which has one button and one paragraph tag. So when i click on button, it will toggle it’s class as well as paragraph tag.

So when you click on button “Click Me”, both paragraph tag & button style will get change.

Continue Reading

Get user ip using Javascript/jQuery

You can get user ip address for logging or for some other purposes. You can get exact ip address of user using the following jQuery code.

Also Read: — Difference between Jquery Prop and attr function

Continue Reading