Common Error in Angular2. Can't bind to 'ngModel' since it isn't a known property of 'input'

Common Error in Angular2. 
Can't bind to 'ngModel' since it isn't a known property of 'input'

This error you will received if you didn't included FormModule in your module.

Better way to resolve this defect is include FormModule in app.module.ts

import { FormsModule } from '@angular/forms';


  imports: [




Posted in Labels: | 1 comments

Angular 2 trigger change detection.

There are three way to implement change detection in Angular 2.

1. ChangeDetectorRef.detectChanges() 

   This is most common used.
   This will Checks only in component and its children.
   Details of class can be read at!#detectChanges-anchor

2. ApplicationRef.tick()

   It will check for full component tree.
   Details of class can be read at!#tick-anchor


   It will check the full component tree after executing the callback function.
   Details of class can be read at!#run-anchor

You can choose one method from above.

inject ApplicationRef, NgZone, or ChangeDetectorRef into your component

Hope this will be help full.

Posted in Labels: | 0 comments

Share value from one component to another component in Angular 2.


You can share value between components using Shared service.

Below is sample code for it.

in Share Service.

export class SharedService {
  private name = '';



In First Component.

  template: `
<input #myVal type="text" />
<button (click)="send(myVal.value)>Send</button>
`, }) export class FirstComponent{ constructor(service:SharedService){ this.service=service; } send(str){ this.service.saveData(str); } }

In Second Component

export class SecondComponent   {



Hope this will help you.

Posted in Labels: | 0 comments

Scroll to top of page in Angular 2 (Using routing)


Sometime we need to move on next page using clicking on page bottom link.

In Angular 2 there is a problem. Next page will not move directly to the top of the page.

This may give bad impression to end user.

Below is one way to move focus on top of the page.

register a listener of route change on main component and scroll to 

top on route changes.

Shown in below example.


import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

    selector: 'main-app',
    template: '',

export class MainComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() { => {
            if (!(evt instanceof NavigationEnd)) {
            window.scrollTo(0, 0)

You can also used document.body.scrollTop = 0. 

 Hope this will helpful.

Posted in Labels: | 0 comments