Javascript : Event binding on Dynamically created element

Whenever we bind events to DOM element, events got attached with all elements which are there in DOM but same events will not get attached to any element which is added dynamically. in order to understand event binding, let’s consider a below DOM structure.

Let’s apply some Styling to above HTML block.

Finally, let’s attach a addEventListener to element with class list-item.

Now if i click on final link, it will translate 30px in Y-axis. You can test the same in Codepen here. Now let’s add a dynamic DIV element with class list item and wrap it inside element with class …

Continue Reading

Angular 2 communication using Services

In this article we will discuss about communication using Services in Angular 2. This is very useful when you have more than one components which need to access and manipulate single source of data. This method is usually used in the following scenario:   Service making API hit to server and share data across all the component inside the web app. Service that pull and push data across multiple component because of it’s singleton property (Single source of truth).   Above are just the very common use cases of this methods. There are other lot of situations where you will be …

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

Deploy Angular 2 project in Subdirectory

Recently i was working on Angular 2 project using Angular-webpack starter template. When i was done developing whole project on my localhost. I build my project using “npm run build”. I tried loading the content of dist directory to one of my subdirectory on my hosting domain. As soon the upload is done, I got index.html at right place but every each link path is wrong like JS, CSS, Images, font-file etc. I Googled little bit but couldn’t able to find right solution at one place. So that’s why i thought of putting solving this riddle for anyone who will stuck …

Continue Reading

Git Tagging in Depth

Git tagging is actually applying marker at a specific point during the software development phase. This can be done either to go back at that particular state of your code or to mark different states of the project development which you can refer later on. In this Git tagging article, we will go through the following basic operations: Types of tag Creating a tag in a git repository List git tags How to tag an older commit Push a tag to a remote repository Checkout a new branch from a particular git tag Rename an existing tag Remove or delete a git tag …

Continue Reading

Cloning Object In JavaScript

Before going to Cloning Object In JavaScript, let’s first understand Object assignment in JavaScript. As we all know, Object assignment does not copy object but it just assign a reference to it.

Above code will output “Upwork” instead of “”. So both myInfo as well as copyInfo reference to same Object. Whenever you do any modification, it will be reflected for output of both the objects. So the question now is “how to Cloning Object In JavaScript”?. There are different methods by which Cloning  of Object in JavaScript can be done. But let’s also be known to the some terms associated …

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

Add multiple classes conditionally in Angular 2

When you will start developing a Application using Angular 2, you might got into  a situation where you need to Add multiple classes conditionally in Angular 2 to one HTML element. For adding a single class conditionally, read this article. There are various ways using which you can change style of any element, you can read everything about that in above link. Let’s first discuss in which situation we might need to add multiple classes conditionally in Angular 2. Let us consider a basic Angular 2 component as below:

Now you might want  to show “Download CSV” button at some …

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

Things that every React Developer should know

I have started learning React JS around 6 months before and i love learning it day by day. React JS is a library which is used to build UI.In React JS is that, you build your application UI as a combination of Components. It provides code maintainability and high flexibility to design as whole UI consists of very small components.  Also React JS use virtual DOM to re-render components when any change happen in the Component and it’s blazing fast. In this article i have included concepts which i think React Developer should know. This post assumes that you are …

Continue Reading