Category: Javascript

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 (){
console.log(text);
var text = ‘inside’;
};
logIt();

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
console.log(text);
text = ‘inside’;
};
logIt();

Hence, it returns
undefined
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’;
console.log(text);
};
logIt();

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) {
  Array.prototype.slice.call(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.

Ex.

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}

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:

https://angular.io/docs/ts/latest/quickstart.html

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:

@Component({
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><th>Name</th><th>Flat</th><th>Contact</th></tr>
<tr *ngFor = “let member of members” (click)=”onselect(member)”  [class.warning]=”member==selectedMember” >
<td>{{member.name}}</td>
<td>{{member.Flat}}</td>
<td>{{member.contact}}</td>
</tr>
</table>
</div>
<div class=”col-md-6″>
<member-detail [member] = “selectedMember”></member-detail>
<edit-member [member] = “selectedMember”></edit-member>
</div></div></div>`,
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.

https://github.com/pravinvarma/people-management