angular 2 components vs directives

Angular 2 components vs directives

Angular 2 components vs directives
                        
1.       @Component meta-data annotation is used  to register the components.
@Directive meta-data annotation is used  to register the directives.
2.       The components are used to create UI widgets.
The directives are used to add behavior to existing DOM elements.

3.       The components are used to split to application into smaller parts.
The directives are use to design a reusable components.
4.       Only one component is used per DOM element.
More than one directive are used per DOM element.
5.       In the components, @View, template and templateUrl are mandatory in the components.
The directive do not have @View etc.


Example for using Component.
    import {Component, View} from 'angular2/core';

    @Component({
       selector: 'hello-world'
    })

    @View({
       template: "<h1>Hello  {{angular}}</h1>"
    })

    class hello {
        constructor(public angular: string) {}
    }

    <hello-world></hello-world>

Example for using Directive.
import {Component, View} from 'angular2/core'';

@Component({
    selector: 'user-detail'
})

@View({
    template: "<div> <h1>{{userName}}</h1> <p>{{phone}}</p>"
})
class userDetail {
    constructor(public userName: string, public phone: string) {}
}


<user-detail></user-detail>



For more detail, go to link
http://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular2



ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.