import { Component } from '@angular/core';

export interface Order {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  template: `<h4>Basic mat-select</h4>
<mat-form-field>
    <mat-label>Sort Order</mat-label>
    <mat-select value='asc'>
        <mat-option *ngFor="let order of orders" (click)="changeOrder(order.value)" [value]="order.value">
            {{order.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>


<ul>
    <li *ngFor="let item of items; index as i">{{i}} -> {{item}}</li>
</ul>`,
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  orders: Order[] = [
    { value: 'asc', viewValue: 'Ascending' },
    { value: 'desc', viewValue: 'Descending' }
  ];

  items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  changeOrder(val: string) {

    console.log('val', val);

    if (val === 'desc') {

      //this.items.reverse();

    }
  }

}