python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions