import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
moduleId: module.id
selector: 'shop-checkbox',
styles: [require('./checkbox.component.css')],
template: require('./checkbox.component.html'),
})
export class CheckboxComponent {
@Input() checked: boolean;
@Output() change = new EventEmitter();
changeCheckbox() {
this.checked = !this.checked;
this.change.emit(this.checked);
}
}
<div class="checkbox" [ngclass]="{active: checked}" (click)="changeCheckbox()">
<div class="view"></div>
<span>Name {{checked}}</span>
</div>
.checkbox.active .view {
background-color: blue;
}
styles: [require('./checkbox.component.css')];
styleUrls: [./checkbox.component.css']
the problem with the tracks;Find more questions by tags AngularJavaScriptTypeScript