Angular 8: Show/Hide Input based on Checkbox selected

I am trying to bind input fields to a list of checkbox fields generated from API. As the code shows below, it will generate 7 checkbox field.

  <form [formGroup]="actForm">
                <mat-label class="activityCheckBox"
                  formArrayName="func1Activities"
                  *ngFor="let act of actForm.controls.activity.controls; let i = index;">
                  <tpcr-input-checkbox [formControlName]="i"></tpcr-input-checkbox>
                  

                  <mat-form-field ngDefaultControl class="example-full-width" type="number">
                    <input matInput class="timeInput" type="number"
                      [(ngModel)]="formProfile.timeSpent" [ngModelOptions]="{standalone:true}">
                  </mat-form-field>

                </mat-label>
  </form>

Right now, the input fields are all generated along with the activity checkbox in the ngFor loop. Is there anyway to ONLY display the specific input field if one of the checkbox is selected?

For example, Activity 1 Checkbox = checked ----> Input Field Appears Activity 2 Checkbox = unchecked ---> Input Field Hide

This is bothering me for some time now, I really appreciate your time and help!!!

Thank you.