In this part you will learn more about building Components with the Input/Output properties; also the templates and the styles. Most of the samples are from the course Angular 2 with TypeScript by Mosh Hamedi on Udemy. I'm developping the Angular 2 samples along way I'm learning Angular 2. If you have time, I recommend you to take the course because it has richer contents.

• Jumpstart - Quick understanding of how to build an App with Angular 2.
• 101 - Property Binding, Class and Style Binding, Event Binding, Two way Binding.
• 102 - Component API in depth.
• 103 - Controlling Rendering of the HTML.
• 104 - Forms and Validations.
• Connectivity - Connecting to the server.

• First install NodeJs
• Install typescript globally

npm install -g typescript
npm install -g typings

We are going to use Visual Studio Code for editing our project after you checkout this repository. Run the command below for install the dependencies

npm install
npm start

Angular automatically updates data-bound properties during change detection

Syntax :

    @Input('alias name') propertyName; // add the Input decorator (@Input()) in your class component.

Using the alias to expose the alias name as the public input name but keep the actual property name as a private property. However if you don't want to use the Input decorator, you can add the input property in the inputs metadata of the component as the code below. Personally I like to use the Input decorator

Example : Using metadata

    @Component({
        selector: 'favorite', 
        template: `
            <span class="glyphicon" 
            [class.glyphicon-star-empty]="!isFavorite"
            [class.glyphicon-star]="isFavorite"
            (click)="onClick($event)" ></span>
        `,
    directives:[ ],
    inputs: ['isFavorite']  // we want to expose the isFavorite to public for binding
    })

    export class FavoriteComponent {
    isFavorite: boolean = false;   
    onClick($event){
        this.isFavorite = !this.isFavorite;
    }

Example : Bind to the input property

    @Component({
        selector: 'my-app',
        template: `<h1>Welcome to Angular 2 - 102</h1>
                My Favorite : <favorite [is-favorite]="post.isFavorite"></favorite>
                `,
    directives:[ FavoriteComponent ]
    })

    export class AppComponent {
    post = {
        title: "Title",
        isFavorite: true
    }

See: Input/Output Property Example

When an output property emits an event, an event handler attached to that event the template is invoked.

Syntax :

    @output('alias name') propertyName = new EventEmitter; 

The Output Property can also declare in the metadata of the component. And the alias name has the same purpose as the Input Property.

The template url is useful when you have a very large template then you want to keep your template in a separate file. The draw back is this will cost you one more http request on the first call. Personnally, I do my best to keep the template inline.

Syntax :

   template:'...' //or
   templateUrl: 'path/your_template_file.html', 

Example : Using templateUrl

@Component({
    selector: 'favorite', 
    templateUrl: 'app/favorite.template.html' 
}) 

it's similar to the template concept, there is inline styles[] and the stylesUrl[]

Syntax :

   styles:[`...`] //or
   stylesUrl: ['path/your_css_file.css','...'] 

Example : Inline Style

@Component({
    selector: 'favorite', 
    templateUrl: 'app/favorite.template.html', 
    styles:[`
        .glyphicon-star{
            color: orange;
        }
    `],
}) 

Make a glyphicon heart when you click on it, the counter increases by one and the color changes to pink . If you click it again . it goes back to gray and decreases by one .
the mouse hover also changes the mouse cursor to pointer.

use the glyphicon from bootstrap to render the icon

Hint :

    glyphicon-heart
    light gray : #ccc
    pink: deeppink
    cursor: pointer

See: Solution

Make a voter component as you see on the stack overflow website. The user can only have one vote up and one vote down. This image illustrates the look and feel of the voter component. Hints :

    glyphicon-menu-up
    glyphicon-menu-down
    width: 20px
    
    Public API
      Input Properties : voteCount and myVote
      Output Properties : vote

See: Solution

Hints :

    Use the Media object from bootstrap for rendering the images.

See: Solution

Useful References - Angular 2 Style Guide - CSS Encapsulation with Angular 2 Components - Core Concepts of Angular 2