Lets Have a fun with Technology.

BTemplates.com

Follow by Email

Monday, August 14, 2017

Run First Application in Angular 2 (Angular 2 base project).



Run First Application in Angular 2 (Angular 2 base project).


è    Need to install node.js from below location.
(Install Latest version of node.js)

è    Run below command from node.js command prompt

npm install –g @angular/cli

ng new myapp

cd myapp

ng serve

Now you will see blow output.




Now run your application from localhost:4200  (mention in above command output). You may see different output base on version.



How to upgrade Node.Js to latest version


How to upgrade Node.Js to latest version.

For Linux/Max

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Instead of stable you can also specify a desired version.

Sudo n 0.8.21

For windows

You can update npm using below command.

npm update npm -g

However to update node.js better you will reinstall from node.js website.

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.