Как проверять выбранные checkbox в angular 2?

Question

Adel Abuhasira @adelone

Как проверять выбранные checkbox в angular 2?

Эксперементирую с Angular 2.

Суть задачи такая:
Есть три элемента: имя, фамилия, отчество. Я их вывожу ниже все вместе и хочу сделать возможность вывода каждого элемента в зависимости от checkbox'ов, например: галочка стоит на имени и фамилии - отчество не показывается, галочка только на имени - два других не показываются.

Сделал пример для наглядности в котором может скрываться только один из элементов, но два сразу скрываться не могут. Логики у меня не хватает.)

Мне кажется, можно через while как-нибудь пройтись и посмотреть, какие чекбоксы активны, а какие нет и на основе этого показывать или скрывать элементы.

Вот мой код:

html:

<h1>Карточка пользователя</h1>
<b>Имя:</b> {{name}} <br>
<b>Фамилия</b> {{lastname}} <br>
<b>Отчество</b> {{surname}} <br>
<hr>
<h2>Вывод полного ФИО:</h2>
<b>ФИО:</b> {{fio}}
<hr>
<h2>Управление выводом</h2>
<input type="checkbox" [checked] = "flagName" [(ngModel)]="flagName">
<input type="checkbox" [checked] = "flagLastname" [(ngModel)]="flagLastname">
<input type="checkbox" [checked] = "flagSurname" [(ngModel)]="flagSurname">
<hr>
<button (click) = "getFio()">Показать ФИО</button>

------------------------------------------------------------------------------------
TS file:

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: 'fio',
    templateUrl: 'flag.component.html'
})

export class flagComponent{
    name: string = "Adel";
    lastname: string = "Abuhasira";
    surname: string = "Muntaserovich";
    fio: string = this.name + " " + this.lastname + " " + this.surname;
    
    flagName: boolean = true;
    flagLastname: boolean = true;
    flagSurname: boolean = true;
    
    getFio() {
        if (this.flagName == false){
            this.fio  = this.lastname + " " + this.surname;
        }
        else if(this.flagLastname == false){
            this.fio = this.name + " " + this.surname;
        }
        else if(this.flagSurname == false){
            this.fio = this.name + " " + this.lastname;
        }
        
        else{
            this.fio = this.name + " " + this.lastname + " " + this.surname;
        }
    }
}