Routing a page using Material select, and routerLink, Angular 6

Admin 1
Viewed 4324

So currently I'm routing to a page to get a list of documents from a policy. I'm also bringing in all of the policies so you can navigate through the select form and re-route you to it with the policy number passed. Is there a way to get on selection of the option to navigate using the new url?

<mat-form-field name="selectPolicy">
    <mat-select placeholder="Change Policy">
        <mat-option *ngFor="let policy of policies" 
            [routerLink]="['../', policy.policyNbr]">{{policy.policyTypeDesc}}
            #{{policy.policyNbr}}
        </mat-option>
    </mat-select>
</mat-form-field>

As of right now, this changes my url, but does submit to the new page once changed.

angular6 angular-material angular
2 Answers

//assuming you have a route set up to take the value as a param
navigateTo(value){
  console.log(value);
  this.router.navigate(['../',value]);

}
 <mat-form-field name="selectPolicy">
        <mat-select placeholder="Change Policy" (selectionChange)="navigateTo($event.value)">
          <mat-option *ngFor="let policy of policies" [value]="policy.policyNbr">
            #{{policy.policyNbr}}
          </mat-option>
        </mat-select>
      </mat-form-field>

user_79537550

In the class, can be after ngOnInit if you have one

user_79537550
Related