<div fxFlex="25" fxFlex.xs="100" class="px-8">
<div class="form-label">Reporting Status <span class="reqSgnColor">*</span>
</div>
<mat-form-field appearance="outline">
<mat-select matNativeControl required formControlName="reporting_status" filter="true" id="rep_status"
name="rep_status" (valueChange)="update_reporting($event)">
<mat-option *ngFor="let status of reporting_statuses" [value]="status.value">{{status.viewValue}}
</mat-option>
</mat-select>
<mat-error> Select Reporting Status is Required</mat-error>
</mat-form-field>
</div>
https://i.sstatic.net/zK7bq.png
Two distinct pages are involved here. One page requires a specific value to be hidden from the dropdown menu, while the other page needs that same value to be displayed in the dropdown. These two pages are "Issue-Tracker" and "Resolve-Issues". Both contain an edit button which serves the same purpose on both pages. When navigating to the "Issue-Tracker" page, the option "Resolved" should not appear in the dropdown, whereas when on the "Resolve-Issues" page, the option "Open" should not be included. However, when clicking the edit button, both pages lead to the "Edit Issue Page" where all options are available, as they remain static.