Angular 1 and Angular 2 Integration

Angular 2 Components Example

In Angular 2, the components are the main way to build or specify HTML elements and business logic on the page.

In AngularJs 1, we are handling using scope, directives and controllers but all those concepts are using in a single combined that is called components.


The component is the core functionality of Angular 2 app but we need to know to pass the data in to the components to configure them. 

Stayed Informed -  Angular 2 Tutorials For Quick Start

To build an Angular 2 application you define a set of components, for every HTML elements, views, and route.  

Angular 2 applications must have a root component that contains all other components. That means all Angular 2 applications have a component tree.

Application è Component è Component1 and Component2

Example of Components


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

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})

export class HomeComponent {
    userlist: Users[];

    constructor() {
        this.userlist = [
            { Id: '1001', name: 'Anil Singh', site: 'http://www.code-sample.com' },
            { Id: '1002', name: 'Alok', site: 'http://www.code-view.com' },
            { Id: '1003', name: 'Reena', site: 'http://www.code-sample.xyz' },
            { Id: '1004', name: 'Dilip', site: 'http://www.codefari.com' },
        ];
    }

    values = '';
    onKeyUp(event: any) {
        this.values = event.target.value;
        console.log(this.values);
    };

    onKeyDown(event: any) {
        this.values = event.target.value;
        console.log(this.values);
    };
}

export class Users {
    Id: String;
    name: String;
    site: String;
}

/* For HTML Components
 <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" (keydown)="onKeydown($event)" />
*/

Angular 2 Component Summary

·         Angular 2 Component meta-data annotation is used to register the components.
·         Angular 2 components are used to create UI widgets.
·         Angular 2 components are used to split to application into smaller parts.
·         Only one component is used per DOM element.
·         In the Angular 2 components, @View, template and templateUrl are mandatory in the components.

I hope you are enjoying with this post! Please share with you friends. Thank you!!

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book