matSort, ERROR Error: Uncaught (in promise): HierarchyRequestError: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.

While working on matSort if you face issue – “ERROR Error: Uncaught (in promise): HierarchyRequestError: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.”, make sure to add mat-sort-header in th element and not in the container.

An interesting question of variable hoisting

var text = ‘outside’;
function logIt (){
var text = ‘inside’;

If you think it will output ‘inside’, then you might have thought of variable hoisting. But, we need to recollect that variables do not hoist their values. So above example can be simplified as

var text = ‘outside’;
function logIt (){
var text; // hoisted variable,  text = undefined
text = ‘inside’;

Hence, it returns
undefined (This is because you are not returning any value from the function 🙂 )

While using let in ES6, you will need to decalre it before using it.

var text = ‘outside’;
function logIt (){
let text = ‘inside’;

Function currying

Given a function call sum(1)(2), write a function with currying and without currying.

With currying –

var sum = function(num1) {
  return function(num2) {
    return num1 + num2;

Without currying, we can create a sum function on the prototype object of Function. Since we will be using apply function to provide argument to the sum function, we will have to convert ‘argument’ array(which is not actually an array) to array so that we would be able to use concat function to combine both the arguments(num1,num2).

So we write this toArray function as below.

var toArray = function(args) {;

and we write sum function as below –

var sum = function(){
self = this;
var args = toArray(arguments);
 return function(){
  return self.apply(this, args.concat(toArray(arguments)))

Using Object.assign

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.


var options = {animation: true; speed:'2s'};
var defaultOptions = {animation: false; speed: '2s'};
Object.assign(defaultOptions, options); // {animation: true, speed: "2s"};

We can merge multiple objects together using Object.assign.

var animation = {type: 'ease in', time: '2s'};
var size = {width:20, height:10};
var sprite = Object.assign(animation,size); //{type: "ease in", time: "2s", width: 20, height: 10}

Trip from Mumbai to Bali

I am writing this blog post three weeks after returning back from Bali. So I will try to recollect as much information as possible. We(I and my wife) planned this trip two weeks before the actual travel date. We planned the trip ourselves without going for any package tour. Since July-August is the peak season, we choose the same time for our holidays.

Air ticket
We booked Air Asia from Mumbai(from website). This is the cheapest career from Mumbai to Bali. The airline by default allows the baggage of 9Kg. So I paid an additional amount(approx. ₹4000) which allow carrying 20Kg in check-in baggage. When I weight it was a 13Kg weight for our bag. So if there are two people traveling you would need to go for this option to avoid last minute hassle at the airport. The airline(XT853) does not have business class. It offers only premium and economy class.

Make sure you carry water and blanket because you will have to pay for it. Yes! you heard it right. It costs ₹ 100 for a water bottle and ₹ 1000 for a blanket(especially if you are traveling in an economy class). The airline will have a halt of 45 minutes at Kaula Lumpur. You won’t be allowed to alight here. The same flight carries you and the new passenger to Bali. So, you will have to kill some time(as there is no In-flight entertainment (IFE)).

Visa, SIM card, and currency
Indonesia provides Visa on arrival facility for Indian nationals which is valid for 30 days. You don’t need to pay any fee for it. Also, you need not buy expensive SIM cards and Indonesian currency(with the low conversion rate, I got from BookMyForex with 120 🙁 ) from India. So, you don’t need to follow the stupid way which I followed. You will get local SIM cards and currency(with a conversion rate of ₹150) at the airport(at the exit gate).

The Hotels
As we had just four days to spend in Bali we planned to stay two days in Ubud(central Bali) which is a hilly area with a lot of greenery and two days in Sanur. So, we booked Kupu Kupu Barong Villa(from in Ubud and Puri Sanitarian(from in Sanur.

From Airport to Hotel
How do you plan to reach to Hotel from Airport? Well, when I asked for pickup from Airport to the hotel I booked, they said it will charge me around 500,000 Rupiah(Indonesian not Indian and yes do not be afraid with the zeros). If you convert it to Indian Rupee it will be around ₹3000, which was expensive. The better option is to book Uber or pre-book from India.

At the Airport
“Good Morning this is your captain speaking, we will shortly land at Ngurah Rai International Airport, Denpasar”.  After a journey of eight hours, you will finally reach your destination in the morning.

You will have to walk to the immigration counter where your passport will be checked and stamped from where you will have to head to collect your check-in bag. At the exit gate buy currency and SIM cards if you need. You will find your driver holding placard of your name.

The resort – Kupu Kupu Barong Villa
Bali has 83% people who follow Balinese Hindu religion and people here are most hospitable. We were welcomed with the garland of the flowers with a welcome drink at our resort Kupu Kupu Barong Villa. If you really want to enjoy your holidays in peace, I recommend you to book the riverside villa.

Kupu Kupu Barong, River-side villa

The resort offers complimentary breakfast and afternoon tea(with their bakery products). You will get a lot of options for Indian breakfast such as Paratha as there is an Indian chef working in the kitchen. I enjoyed the Banana Pancake with Tea 🙂 If you are vegetarian, you may try Mi Goreng(Fried Rice) or Nasi Goreng(Fried Noodles) in your Lunch. You may try some Spa therapy in Mango tree spa in this resort. Since I had already booked at another hotel, I can’t say anything about the review.

The resort has their own paddy field adjacent to the river. You can visit it and enjoy the photography with the scenic background. They also organize a cultural program on each Tuesday(if I am not wrong). If you need ATM machine, it is just opposite side of the entrance on the main road. Opposite to ATM, there is a supermarket where you can buy eatables and other stuff.

The staff in Kupu Kupu Barong Villa are friendly and soft spoken people and you will be greeted by them each time they see you. I loved it. Here are some pics

With friendly staff in Kupu Kupu Barong Villa, While saying goodbye.


Starting with Angular2 project

Angular2 app demo

To start with Angular2, you will have to follow the guidelines given at the below location, I followed the same:

I have created a small demo of People management application here.

The application has basic app component inside which we have imported components – header, member edit and member details. So assuming that the components are created in their respective typescript file. we will have following lines at the top of our app.component.ts file.

import { Component } from ‘@angular/core’;
import {SocMem} from ‘./member’;
import {MemberDetailsComponent} from ‘./member-details.component’;
import {Header} from ‘./header.component’;
import {MemberEditComponent} from ‘./member-edit.component’;

Above all lines import the components.

Then we will create a class AppComponent.

export class AppComponent {
members= MEMBERS;
selectedMember =  MEMBERS[0];
onselect(member){ console.log(member);this.selectedMember = member;}
In the class definition we have assigned MEMBER of const type to member property to be usable to display on the grid. Onselect method associated with this class is used to get the selected member from the grid.

Above this class definition we have decorator function for the class which decorates the class by adding the template in the defined selector which takes the following from:

selector:[selector in the HTML file],
template:[template to add to the selector]

For our application we will have decorator in the following form:

@Component({ /* Component decorator*/
selector: ‘my-app’,
template: `<div class=”container”><app-header [titleapp]=”apptitle”></app-header>
<div class=”row”>
<div class=”col-md-6″>
<table class=”table-bordered table”>
<tr *ngFor = “let member of members” (click)=”onselect(member)”  [class.warning]=”member==selectedMember” >
<div class=”col-md-6″>
<member-detail [member] = “selectedMember”></member-detail>
<edit-member [member] = “selectedMember”></edit-member>
directives: [Header,MemberDetailsComponent,MemberEditComponent]

In the above code snippet *ngFor is used to iterate over the objects, we used to have ng-repeat in the previous versions. The let keyword inside *ngFor is ES6 feature for scoping the variable.

my-app is the root component inside which we defined different components like header, member details and member edit. We are listing the directives to be included in the root component in the array.

The complete application code is available at the git repository here.