angular 연습 2

그냥 별모양을 클릭하면 검정색으로 채워진 별로 토글시키는 아주 간단한
컴포넌트를 만들어 보았다.

@Component({
    selector: 'my-app',
    template: `<h1>{{ title }} </h1>         <h2><i ngClass="{{(isStarOn()) ? 'glyphicon glyphicon-star' : 'glyphicon glyphicon-star-empty' }}" (click)="toggleStar()"></i></h2>            `,
    directives: [CoursesComponent, AuthorsComponent]
})

export class AppComponent {
    title = "Angular App";
    star = false;
    toggleStar(){

        this.star = !this.star;
    }
    isStarOn(){
        return this.star;
    }
}

짧지만 재미있다.

강의에서는 

<i 

    class="glyphicon" 

    [class.glyphicon-star-empty]="!isFavorite"

    [class.glyphicon-star]="isFavorite"

    (click)="onClick()">

</i>

export class FavoriteComponent{

   isFavorite = false;

   onClick(){

      this.isFavorite = !this.isFavorite;

   }

}

이런식으로 처리한다.