Given the following code, how would I bind on click my selected option to selectedOption.name and selectedOption.value, respectively?

appponent.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {

  options = [
    {
      name: 'test1',
      value: "This is test1's value"
    },
    {
      name: 'test2',
      value: "This is test2's value"
    },
    {
      name: 'test3',
      value: "This is test3's value"
    }
  ]
}

appponent.html:

<button md-icon-button [md-menu-trigger-for]="menu">
  <md-icon>ment</md-icon>
</button>
<md-menu #menu="mdMenu">
  <div *ngFor="let option of options">
    <button md-menu-item>{{option.name}}</button>
  </div>
</md-menu>

<h3>Your selected option: </h3>
<p>{{selectedOption.name}}: {{selectedOption.value}}</p>

Given the following code, how would I bind on click my selected option to selectedOption.name and selectedOption.value, respectively?

app.ponent.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {

  options = [
    {
      name: 'test1',
      value: "This is test1's value"
    },
    {
      name: 'test2',
      value: "This is test2's value"
    },
    {
      name: 'test3',
      value: "This is test3's value"
    }
  ]
}

app.ponent.html:

<button md-icon-button [md-menu-trigger-for]="menu">
  <md-icon>ment</md-icon>
</button>
<md-menu #menu="mdMenu">
  <div *ngFor="let option of options">
    <button md-menu-item>{{option.name}}</button>
  </div>
</md-menu>

<h3>Your selected option: </h3>
<p>{{selectedOption.name}}: {{selectedOption.value}}</p>

• javascript
• angular
• material-design

Share Improve this question Follow edited Nov 14, 2016 at 22:49 Marco Scabbiolo 7,46933 gold badges4040 silver badges4848 bronze badges asked Nov 14, 2016 at 22:47 mpacempace 9311 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can use a click event on a button to set the selectedOption:

<div *ngFor="let option of options">
  <button md-menu-item (click)="selectedOption = option">
    {{option.name}}
  </button>
</div>

<p>{{selectedOption?.name}}: {{selectedOption?.value}}</p>

Note the ? elvis operator. This is used to prevent template errors from reading a property when selectedOption is not yet defined.