import { Component , ViewChild } from '@angular/core' ; import { ObSelectableGroupDirective } from '@oblique/oblique' ; @ Component ( { selector : 'sc-card' , templateUrl : './card.component.html' , styleUrls : [ './card.component.scss' ] } ) export class CardComponent { @ ViewChild ( ObSelectableGroupDirective ) selectableGroup : ObSelectableGroupDirective ; avatarVisible = true ; titleVisible = true ; subtitleVisible = true ; headerVisible = true ; pictureVisible = true ; contentVisible = true ; actionsVisible = true ; checkboxMode = true ; toggleAvatarVisibility ( ) { this . avatarVisible = ! this . avatarVisible ; } toggleTitleVisibility ( ) { this . titleVisible = ! this . titleVisible ; } toggleSubtitleVisibility ( ) { this . subtitleVisible = ! this . subtitleVisible ; } toggleHeaderVisibility ( ) { this . headerVisible = ! this . headerVisible ; } togglePictureVisibility ( ) { this . pictureVisible = ! this . pictureVisible ; } toggleContentVisibility ( ) { this . contentVisible = ! this . contentVisible ; } toggleActionsVisibility ( ) { this . actionsVisible = ! this . actionsVisible ; } toggleCheckboxMode ( ) { this . checkboxMode = ! this . checkboxMode ; this . selectableGroup . mode = this . getSelectMode ( ) ; } getSelectMode ( ) { return this . checkboxMode ? 'checkbox' : 'radio' ; } }