ngIf, ngFor and ngSwitch in Angular 2

While writing templates in Angular 2, these three directive are used most extensively. These directives are same as Angular 1 but syntax of writing is surely changed. Let’s discuss ngIf, ngFor and ngSwitch in Angular 2 one by one. Above directives are also called as Structural Directives. ngIF: ngIf directive is used to add a conditional check whether that element should be added in DOM. Let’s take a very simple example:

Note: Don’t forget the asterisk (*) in front of ngIf. (*)asterisk symbol before ngIf actually wrap the element inside <template></template>. This * symbol is just there to skip some …

Continue Reading

ng-transclude in Angular 2 Component

I was developing an application lately which requires developing lot of Angular 2  components. I develop components which can be either reused in different part of your application or either separate your code from rest of messy code. while developing components, you  might get into a situation where you want to passing your HTML template in component or ng-transclude as in Angular 1. In Angular 1, we used to do this by adding transclude: true in a directive. Let’s understand how we can achieve ng-transclude in Angular 2. let’s firstly create a simple ItraModalComponent component which allow adding DOM content inside it. Let’s …

Continue Reading

Angular 2 Events & Events Cheet sheet

Angular 2 events are put in template between the parentheses and trigger methods in the component classes as follow:

Angular events are just like any normal event, they are bubble up & propagate down. Angular also provide custom event for component as output  & EventEmitter with the major difference that Angular custom event don’t bubble up, so you can’t bind child event to it’s parent. You can pass the $event for any event in Angular component as an argument as follow, which can be used in a situation where you wanted to stop event propagation.

Beside “click” event there are whole …

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

Angular2 : Class binding and Style binding

This article will take you through following: How to add class conditionally in Angular v-2 , How to add inline style in Angular v-2,  What is the concept of Class binding and style binding.  In Angular 1, conditionally adding a class require the use of ng-class directive. But in Angular 2, same can be achieved by using ngClass or ngStyle directives . So below is the possible way to achieve the same in Angular 2. Methods for adding or removing class based on Property are as following: Class Binding ngStyle or inline style binding NgClass (Better choice when need to add …

Continue Reading

Getting hands on with Shell Scripting

From a long back i wanted to get my hands dirty with Shell script language. I just love commanding Kernel to do things that it can do like File processing, Getting hardware information etc. I just started from pretty much basic stuff. First of all, i started looking for tutorials that can provide me syntax of all basic commands. I started with one website and after a hour or two, i started felling bored of reading stuff (Awwwww!!! I was never good at reading stuff). After this i started searching for Video tut and i find one which have all …

Continue Reading

How to remove untracked files

Untracked changes are changes which are not being added to staging area yet. In git, you add changes to staging area using git add <filename/directoryname/ .> Sometime you change some file or add some files/directories but later you don’t wanna include them in the project. So you wanna remove untracked changes. You can do that in below simple steps: First of all, you check all untracked changes.

Above command will list all untracked changes. Now you can delete it using following commands.   Just note that this step will delete your files.

To remove directories, run git clean -f …

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

Run pm2 with Environmental Variable

PM2 is an advanced production process manager for Node JS. You can get better reports, info about your running apps on Node JS Server. The best service that i got till now to host Node JS application is Digitalocean. They provide you with private VPS (a.k.a droplet) where you can run your Node JS applications. If you are looking for VPS, i suggest you to signup using this link. We can run your app.js with PM2 as following:

Normally if you want to run you Node JS app with Env_var, you can do it like this:

But Now if …

Continue Reading