There is a defined observable called imageOptions$ in my code:
imageOptions$: Observable<BoundImagesToProject[]> = this.imagesService
.getBoundImages({ projectId: this.projectId })
.pipe(map((images) => (images.data)));
and it is used in the template like this:
<div class="form-field input-group">
<label for="image">Image</label>
<mat-select id="image" class="select--full-width" placeholder="Image" formControlName="image">
<mat-option *ngFor="let image of imageOptions$ | async" [value]="image.imageId">
{{ image.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="createVmForm.get('image').getError('required') && createVmForm.get('image').dirty"
>Field is required</mat-error
>
</div>
I am now looking to utilize the imageOptions$ observable in the TS file as follows:
this.imageChangeSubscription = this.createVmForm.get('image').valueChanges.subscribe((value) => {
this.selectedImageVolumeSize = this.imagesOptions$ // get array value and match id and get the size.
If the data was stored in an array, the code would look like this:
this.selectedImageVolumeSize = this.images.find((image) => image.imageId === value).size;
My objective is to achieve this without nesting subscriptions and avoid unnecessary properties in the TS file. Is there a way to accomplish this?