Routing via MatAutocomplette Angular - html

Question

I am trying to implement the autocomplete component of Angular Material:
It works fine, it at least displays and I see the data from my json. Is there a way to route on click of the event, that is when something is selected from the autocomplete to a page?
My HTML currently looks like this:
<div class="example-form">
<div class="container">
<form [formGroup]="schoolForm">
<mat-form-field class="example-form">
<input type="text" matInput placeholder="Gib den Namen deiner Schule ein" formControlName="schoolGroup" required
[matAutocomplete]="autoGroup">
<mat-autocomplete #autoGroup="matAutocomplete">
<mat-optgroup *ngFor="let group of schoolGroupOptions | async" [label]="group.letter">
<mat-option *ngFor="let name of group.names" [value]="name">
{{name}}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</mat-form-field>
</form>
<form [formGroup]="schoolForm">
<mat-form-field class="example-form1">
<input type="text" matInput placeholder="Gib den Nachnamen deines Lehrers ein">
</mat-form-field>
</form>
</div>
<button mat-raised-button color="primary" routerLink="/teachers">Ergebnisse anzeigen</button>
</div>
how should the TS. look like?
Thx for your help

Answer 1

Looking at the documentation we see that MatAutoComplete exposes an event when an option is selected.
#Output() optionSelected
Reading further, we need to add [matAutocomplete] as a directive onto our text input, and pass it a reference to the auto-complete in our template.
To do this, I create a mat-autocomplete and give it the template literal name of #navigable which we pass into the [matAutocomplete] directive.
This gives us the following html template
<mat-form-field>
<input type="text" matInput [matAutocomplete]="navigable">
<mat-autocomplete #navigable (optionSelected)="chooseOption($event)">
<mat-option *ngFor="let group of groups" [value]="group.route">{{group.name}}</mat-option>
</mat-autocomplete>
</mat-form-field>
Note we can bind to (optionSelected) on the mat-autocomplete as it is the event stated in the API to be called when the value is selected for our attached input.
in our .ts file
#Component()
export class MyExampleComponent {
// group dummy object, hard-coded for demonstration purposes
// I've chosen to store the route directly on the group.
// You should choose whichever strategy suits your needs
groups = [
{
name: "One",
route: 'one'
},
{
name: "Two",
route: 'two'
},
{
name: "Three",
route: 'three'
}
];
// inject router for navigation
constructor(private router: Router) {}
chooseOption(event: MatAutocompleteSelectedEvent) {
// destructure the value and navigate.
const {option: {value}} = event
this.router.navigate([value]);
}
}
and that is it. We will now navigate as soon as an option is selected in the dropdown list.