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.
Category: Javascript
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;
}
}
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);
}
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)))
}
}
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"};
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}
var size = {width:20, height:10};
var sprite = Object.assign(animation,size); //{type: "ease in", time: "2s", width: 20, height: 10}
Some logo creations
Fojie Gold, Mumbai
Stylez Women Clothing, Pune
Flight Search Engine
Starting with Angular2 project
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.