Placeholder selector in SCSS

Sass full form is  “Syntatically Awesome Style Sheets” and it is preprocessing CSS library which allows us to use various cool feature like variable, function, nesting, mixins, placeholder etc. I love all of these features because it make my life easy and create style dynamically. Today i will discuss one feature of Sass which is known as “Placeholder selector in Sass”.   Sass Placeholder feature is very useful in cases where you need to extend same class into multiple classes and exclude that class from final css. This will reduce your code little bit. Let’s dive into code: Let’s say you have “icons” class which …

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 “Media.net”. 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

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