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!!