# How to detect if specific checkboxes with specific names are checked off?

I have an Angular Material Stepper element, and the first <mat-step> contains a list of checkboxes for the user to check.

The following is the first <mat-step> with the checkboxes:

<mat-step [stepControl]="itemCheckboxes">
<ng-template matStepLabel>Select The Items You Want</ng-template>
<span *ngIf="items.length === 0">No items currently in your account.</span>
<li *ngFor="let item of items">
<mat-checkbox (change)="onCheckboxChange(\$event, item.name)">{{ item.name }}</mat-checkbox>
</li>
</ul>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>


I’m trying to make a specific <div> show in a following <mat-step>, only if checkboxes with specific {{item.name}}s are checked.

For example, if the user checks a checkbox named "Banana", then the specific <div> related to the checked "Banana" checkbox would show. And if the user checks a checkbox named "Apple", then a different <div> would show.

And if the user checks off both a checkbox named "Banana" and a checkbox named "Apple", then both respective "Banana" and "Apple" <div>s would both show.

And of course, if the user does not check off a checkbox named "Banana" or a checkbox named "Apple", then both the respective "Banana" and "Apple" <div>s would stay hidden. And I was thinking of having a "default" <div> show by default, which would hide if "Banana" or "Apple" was checked off.

I assume it’s best to use *ngIf to show/hide the <div>s, but how would I write the code to "detect" if a checkbox with a specific {{item.name}} was checked off?

And then how would I put everything together? I am trying to edit an existing project, and I am very new to coding, but I need to get this done quickly, so step-by-step details would be much appreciated. Thank you!

Source: Angular Material Quesions