Using the currently selected mat-tab's info outside of the tab

Question

I have two elements. One inside an ngFor loop, and one outside. Inside the ngFor loop, I can access all my observable's values (UsersName, SubmittedTime, etc). Outside the for loop however, I cannot. I have a situation that requires accessing that observable outside of the loop where I can access those fields. So I devised a nifty way to use ngModel to make this work, but ngModel is a bit tricky for me. I plan on using ngModel to take the current reference inside the loop and spit it out elsewhere outside of the loop. I need help with this.

<-- OUTSIDE OF MAT-TAB-GROUP -->
<div class="content">
    <-- CURRENTLY SELECTED TAB'S 'USERSNAME' PROPERTY (DOESN'T WORK) -->
    <a class="header">{{collection.UsersName}}</a>
</div>

---

<mat-tab-group>

                               <-- LOOP STARTS HERE -->
    <mat-tab label="{{ thing.FileName }}" *ngFor="let thing of collection | async">

                   <-- MY NIFTY LITTLE TRICK (NOT SURE HOW TO MAKE IT WORK) -->
      <input [(ngModel)]="thing.UsersName" name="UsersName" value="{{thing.UsersName}}">

                              <-- MISCELLANEOUS CODE -->     
      <span *ngIf="thing.FileContentType == 'image/png' ">
        <img class="ui rounded fluid image" src="{{thing.FileURL}}" style="pointer-events: none;">
      </span>

    </mat-tab>
                               <-- LOOP ENDS HERE -->

</mat-tab-group>

Typescript

angularCollection: AngularFirestoreCollection<Submission>;
collection: Observable<Submission[]>;

this.angularCollection = this.afs.collection(path);
this.collection = this.angularCollection.valueChanges();

Answer 1

collection is an array it does not have UsersName propery. The objects inside it have, so you can access it like collection[0].UsersName . To show UsersName propery of selected tab you need to use selectedIndex property of mat-tab-group

some.component.ts:

@Component({
    selector: 'tabs-template-label-example',
    templateUrl: 'tabs-template-label-example.html',
    styleUrls: ['./tabs-template-label-example.css']
})
export class TabsTemplateLabelExample {
    tabIndex: number = 0;
}

some.component.html:

<div class="content">
    <!-- Show UsersName of selected tab -->
    <a class="header">{{collection[tabIndex].UsersName}}</a>
</div>

<!-- set selected tab with two way data binding -->
<mat-tab-group [selectedIndex]="tabIndex">

    <mat-tab label="{{ thing.FileName }}" *ngFor="let thing of collection | async">

    <input [(ngModel)]="thing.UsersName" name="UsersName" value="{{thing.UsersName}}">

    <span *ngIf="thing.FileContentType == 'image/png' ">
        <img class="ui rounded fluid image" src="{{thing.FileURL}}" style="pointer-events: none;">
    </span>

    </mat-tab>

</mat-tab-group>