Angular2 - No http post or get until you call subscribe.

Sometimes rxjs can be so lazy. Nothing happens until you call 'subscribe'.

When you are making a http request get or post, you might find out that there's no outgoing http request. Does the code below looks familiar, well..... you will get it if you call subscribe.  :/ This is a gotcha for many people.

Javascript / Typescript rest and spread operators

To make it easier, rest and spread operator basically helps to merge all your function parameter together. In the past, we use something like

myfunction.apply(null, myAgumentList)

With rest and spread we can easily

function log(...a) {

log(1,2,3,4,5); // outputs [1, 2, 3, 4, 5] array

Notice we're assigning myArguments at the back. 

let myArguments = ['x', 'y', 3]

log(1,2, myArguments); // outputs [1, 2, ['x', 'y', 3]] 2 different array 

log(1,2, ...myArguments); // outputs [1, 2, 'x', 'y', 3] 1 array

Notice we're assigning myArguments at the front. 

log(...myArguments,1,2 ); // outputs [ 'x', 'y', 3, 1, 2] essentially a single array.

Angular2 providers with useClass purpose

Might be wondering what is the purpose the useClass construct as shown here
[{ provide:Logger, useClass:Logger}This provides a way for Angular2 to find and use the proper class / providers. Think of it as a key / value matching approach. Some people uses mock logger service by specifying useClass : BetterLogger.

Difference between NativeElement and DebugElement in Angular2 test

What is the difference between native element and debugElement in Auglar2 test?

Short answer :-

DebugElement contains method / function to query or test an Angular2 component html elements

NativeElement is the html itself.

Have a look at the diagram below. The first is debug element while the last item is native element itself.


Wanting to find out more about ESNext ....check this link out

typescript async and await

Typescript has it now... async and await.

SqlDependency not firing, you're not the only ones. :)

8 years old, i tried using SqlDependency and it failed badly. Today i have another go at it for some weird reasons.

Anyways, if you're having problem with SqlDependency, you're not alone. Try to use this solution instead.  The only thing I don't like about it is, change response is given in XML.

Try SqlDependencyEx instead.

Typescript allow initializer to create and instantiate an instance

The keyword partial transform fields into optional.

So we're able to initialize our object instance this way.

Pretty cool eh..

if your ngFor or ngIf not working - You might not have Common Module imported

import { CommonModule } from '@angular/common';

@NgModule({   imports: [     RouterModule.forRoot(appRoutes), HttpModule, ReactiveFormsModule, CommonModule   ],   declarations: [AddPersonComponent, SearchComponent, ListComponent],   providers: [PersonService],   exports: [     RouterModule   ] })

angular2 call service via OnNgInit

If you need to call a service, please do it via OnNgInit instead of using constructor. If you doing unit testing, your code might not work.
As shown in the code below :

classSomeServiceimplementsOnInit { constructor(privatehttp:Http) { } ngOnInit() { // this should hit mocked backendthis.http.get("dummmy url").subscribe(v=> { console.log('constructor subscribe hit'); }); } someMethod() { // this should hit mocked backendthis.http.get("anotherurl").subscribe(v=> { console.log('some method called subscribe hit'); }); } }

angularjs2 common stuff that i always forgets


   providers : []  // providers
providers array provide a dependency injection layer between ngmodule and other child components. A child component will typically traverse to the parent to look for a provider - a singleton service or in plain language a class with a tasks like news feed service or http service.

if you specify providers in a child component, this service will be instantiated as a separate instance.


This module provides services for running and opening browser. What type of services?
Always import BrowerModule in the root AppModule.ts.

@Input and @Output

Passing data using @Input  (Property passing with [] )  and @Output (event passing with ()  )

Custom Directive 

You essentially can still create custom directive in Angular2.


@Pipe - custom, stateless and stateful pipe

c# recursive Fibonacci implementation. Not a very efficient solution.