Solution 1 :

try this

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="inputChange()">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

in component.ts

title = 'materialdesign';
  selected = 'option33';
inputChange(){
  if(this.selected == 'option3'){
    this.greet();
  }
}

  greet() {
    this.selected = 'it works';
  }

stackblitz example

Solution 2 :

If you want to listen to an event from an Angular component, you need to add parenthesis around the event:

<mat-option (selectionChange)="greet($event)">Option 3</mat-option>

Then your should method should start executing.

Solution 3 :

Try like below,

selectionChange event is part of mat-select. So Just call the method when you select an option from the list. And based on the value of the option selected, execute your required code.

.html

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="greet($event)">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

.ts

selected: string;

greet(event) {
  if(event.value === 'option3') {
    // Execute the required code
  }
}

Solution 4 :

Simply define click event handler on the specific mat-option element.

<mat-option value="option3" (click)="greet()">Option 3</mat-option>

Problem :

I am new to Angular and I want to call a specific method, only when option3 is selected.
I am struggling to solve this and cannot find much information on this on the internet.

When I call option3, the output is empty.

Here is my code so far:

app.component.html:

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" >
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option selectionChange="greet($event)">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'materialdesign';
  selected = 'option33';


  greet() {
    this.selected = 'it works';
  }
}

Comments

Comment posted by JeffryHouser

Looks like others have stated when you change the value of

Comment posted by Gangadhar Gandi

You forgot to keep value attribute for the option3 mat-option. Option 3

Comment posted by Gangadhar Gandi

Yes. Replace the last option with Option 3

Comment posted by uminder

That’s because inside

Comment posted by uminder

Remove

By