CODEWITHSUNDEEP
angulartypescript
vector8188
vector8188

Reputation: 1393

angular2 access value of template variable,

I would like to understand on how can I access the values of selected items in templates. specifically I would like to know how I can access the selected value of IPMIDisplayTime and IPMIDisplayTime in the template and use that down the road.

 import {ViewChild, ElementRef} from '@angular/core';

@Component({
  selector: 'app-select-dialog',
  template:`<h1 mat-dialog-title>
  {{ title | translate }}
</h1>
<div mat-dialog-content>
  <mat-select  #IPMIDisplayTime name="name" placeholder="optionPlaceHolder" [(ngModel)]="IPMIDisplayTimeSelection">
      <mat-option *ngFor="let option of options" [value]="options.value">
          {{ option.label }}
      </mat-option>
  </mat-select>  
</div>
<div mat-dialog-actions>
  &nbsp;
  <span fxFlex></span>
  <button class="mat-raised-button mat-accent" (click)="dialogRef.close(false)">{{"Close" | translate}}</button>
  <span fxFlex></span>
  <button class="mat-raised-button mat-accent" (click)="dialogRef.close(true)">{{"OK" | translate}}</button> 
</div>`,
  styleUrls : [ './select-dialog.component.scss' ]
})
export class SelectDialogComponent {

  public title: string;
  public options: Array<{ label: string, value: string }>;
  public optionPlaceHolder: string;
  public method: string;
  public params: string;
  @ViewChild('IPMIDisplayTime') IPMIDisplayTimeSelect: ElementRef;
  IPMIDisplayTimeSelection: string;


  constructor(public dialogRef: MatDialogRef < SelectDialogComponent >, protected translate: TranslateService ) {

  }





}

Upvotes: 2

Views: 304

Answers (1)

Tomasz Kula
Tomasz Kula

Reputation: 16837

You are using the [(ngModel)] two way binding on the <mat-select> component. It means that the IPMIDisplayTimeSelection will always match the current <mat-select> value.

You do not need the @ViewChild decorator and the #IPMIDisplayTime template variable.

someFn() {
  // this is the value of your select component
  console.log(this.IPMIDisplayTimeSelection);
}

Upvotes: 2

Related Questions