Lets Have a fun with Technology.

BTemplates.com

Follow by Email

Thursday, July 6, 2017

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';


@NgModule({

  imports: [

    FormsModule

  ],

})


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
   https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

2. ApplicationRef.tick()

   It will check for full component tree.
   Details of class can be read at
   https://angular.io/api/core/ApplicationRef#!#tick-anchor

3. NgZone.run(callback)

   It will check the full component tree after executing the callback function.
   Details of class can be read at
   https://angular.io/api/core/NgZone#!#run-anchor

You can choose one method from above.

inject ApplicationRef, NgZone, or ChangeDetectorRef into your component

Hope this will be help full.

Tuesday, July 4, 2017

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


Hello,

You can share value between components using Shared service.

Below is sample code for it.

in Share Service.



export class SharedService {
  private name = '';

  savedata(str){
    this.name=str; 
  }

  getData:string()
  {
    return this.name;
  }
} 


In First Component.



@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   {

  constructor(service:SharedService)
  {
    this.service=service;   
    this.myName=service.getData();
  }

}

Hope this will help you.

Monday, July 3, 2017

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


Hello,

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';

@Component({
    selector: 'main-app',
    template: '',
})

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

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}




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

 Hope this will helpful.