Angular 2 is the latest framework for building web applications using typescript. Recently, angular team is skipped the version 3.x because, router package is shipped with 3.x previously, so instead of putting into 3.x, choose to move to 4.x.

Thursday, 20 October 2016

Component in Angular 2

RIP of  "$scope"

In Angular 1.x, we used directives, controllers, scope to specify elements and business logic on the page, but in Angular 2.x , combined all these into single unit named as "Component"
It is a controller class which contains view and logic on the page.
let's see the below basic  component that renders name.
import {Component} from '@angular/core'
@Component({
 selector: 'my-component',
  template: '<p>Hello,  Welcome to my  {{tutorial}}</p>'})
export class MyFirstComponent {
  constructor() {
    this.tutorial= 'Angular2.in'
  }
}
Here is the another component that renders name when we click on the button
import { Component } from '@angular/core';
@Component({
  selector: 'basic-component',
  template: '<div><button (click)="getName()">Get Name</button></div>'
template: '<div><button (click)="getName()">Click to get the name</button></div>'})
export class MyFirstComponent {
  constructor() {
    this.name = 'Angular2.in'  }
  getName() {
    console.log('Name is', this.name)
  }
}
if we use <basic-component></basic-component> in html, this component will be created, constructor is called and rendered. 


0 coment�rios:

Post a Comment

Labels

Online Training

Your Name :
Your Email: (required)
Your Message: (required)

Powered by Blogger.

Recent Posts

Find Us On Facebook

Popular Posts