Angular 4.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<div>isFavorite: {{isFavorite}}</div>
<button (click)="onClick()">toggle</button>
<i class="glyphicon"
[class-glyphicon-star-empty]="!isFavorite"
[class-glyphicon-star]="isFavorite"
(click)="onClick()">
</i>
favorite.component.ts
import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
@Input() isFavorite = false;
onClick() {
this.isFavorite = !this.isFavorite;
}
constructor() { }
ngOnInit() {
}
}
However it has the error
Can't bind to 'class-glyphicon-star-empty' since it isn't a known property of 'i'.
What I have tried:
I tried
angular - angular2 @input not working - Stack Overflow[
^]
It is a little different from the link. I use templateUrl. The link uses template. Still not working.