angular2 access value of template variable,

Question

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 ) {

  }





}

Tomasz Kula · Accepted Answer · 2018-04-11 22:14:03Z

2

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);
}

answered Apr 11, 2018 at 22:14

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular2 access value of template variable,

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related