How to Install Git on Mac

Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. You can install git on mac OS in several ways. You can install it using Package Manager like Homebrew, MacPorts or by downloading a git installer package. We will install git using Homebrew package manager. If you don’t have homebrew already installed, check Homebrew website for installation instructions.   Installing Git using Homebrew:   First of all, update your brew.

2.  After successfully updating homebrew, now you can install git.

3. You can check installed git version …

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”?. Note: Javascript is always “pass by value”, but when a variable refers to Object (including Array) than the value is just a reference to object. There …

Continue Reading

Search pipe in Angular 2

In Angular 1, we have filter pipe for searching Array element. Most application make heavy use of this filter pipe and had speculation of making app heavy from Angular side. Below is the very simple example of Searching a list in Angular 1.

In above example, list will be searched based on input string in input box. filter pipe do everything for us. Now in Angular 2, there are certain pipes available but there is no filter pipe. In angular docs it is mentioned that filter and sort pipes are removed because of Performance issue. They suggest developer to …

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

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