How to extract non-displayed value from mat-autocomplete

I am learning how to use a mat-autocomplete which incorporates option groups, and am confused about how to extract the value I actually need once the user has selected the value they want.

The data source for the list is derived from these interfaces. I use a

interface BudgetItem {
  budgetName: string;
  budgetId: string
interface BudgetListItem {
  projectName : string;
  budgets : BudgetItem[];

The typeahead gathers the budgets for each project into a group, and then the user can pick the budget they want once they’ve used the typeahead to find the right project. The template looks like this:

<form [formGroup]="projectBudgetForm">
                <mat-form-field class="budget-picker">
                    <input type="text" matInput formControlName="projectGroup" placeholder="Pick one" required
                        [matAutocomplete]="autoGroup" class="select-budget-auto">
                    <mat-autocomplete #autoGroup="matAutocomplete"  class="budget-picker">
                        <mat-optgroup *ngFor="let group of budgetNameOptions | async" class="budget-picker"
                            <mat-option *ngFor="let option of group.budgets"
                                [value]="group.projectName + ': ' + option.budgetName">

    <button #open mat-raised-button color="primary" (click)="createChart([what goes here?] ) ">                 
        Create Chart from Budget

Using the [value] property of the typeahead, I succeed in getting the text I want the user to see ("project name: budget name") into the input element once they’ve selected it. But what I actually want to return to the component when the button is clicked, is the id which is accessible inside the typeahead as option.budgetId, but it I don’t know how to get that into the (click) event on the button beneath the typeahead.

Source: New feed
Source Url How to extract non-displayed value from mat-autocomplete