updating dropdown values and title of button if value entered in input element

Question

Following are the requirements if a user enters a value in the input element:

1. The dropdown should be disabled and the only option should be 'Pending'
2. The button title should be "SAVE FEES"

If a user doesn't enter a value and changes the option in the dropdown then the button title should be "SAVE APPROVAL".

I'm wondering if I should create a HostListener event or if I have the code below is fine.

app.component.html

    <input type="number" (change)="setValue($event)"/>
    <button id="save">{{buttonTitle}}</button>
    <select  (change)="setDropdownValueAndButtonTitle($event)" [disabled]="isFeelValueChanged">
      <option *ngFor="let feeFunctionalType of feeFunctionalTypes">{{feeFunctionalType.status}}</option>
    </select>

app.component.ts import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      isFeelValueChanged: boolean;
      buttonTitle: string = 'SAVE FEES'
      feeFunctionalTypes = [{status: 'Pending'}, {status: 'Interim'},{status: 'Final'}]

      setValue(event) {
        this.isFeelValueChanged = true;
        this.buttonTitle = 'SAVE FEES';
        this.feeFunctionalTypes = [{status: 'Pending'}];
        console.log("value is: ", event.target.value);
      }

      setDropdownValueAndButtonTitle(event) {
        if (this.isFeelValueChanged) {
          console.log("value is: ", event.target.value);
          this.buttonTitle = 'SAVE FEES';
        }
        else {
          console.log('In here');
          this.buttonTitle = 'SAVE APPROVAL';
        }
      }
    }

Answer 1

I added ngModel and ngModelChange to your input tag so that we can track if the user inputs a value.

I added ngModel to your select tag so that we can update the selected option to 'Pending' once all conditions are met. Then, I changed the property disabled to dynamic and will be disabled only when users enters a value. I also added a property called hidden to dynamically hide the other options except 'Pending' if user inputs a value.

Lastly, I created a function called updateLabels so that we can use this method to update the button label and the selected option if users input a value.

I created a stackblitz containing my solution for you to check.

HTML

<input type="number" [(ngModel)]="fee" (ngModelChange)="inputChanged()" />
<button id="save">
  {{ buttonTitle }}
</button>
<select [(ngModel)]="optionSelected" [disabled]="fee">
  <option *ngFor="let feeFunctionalType of feeFunctionalTypes" [hidden]="hideOption(feeFunctionalType.status)">
    {{ feeFunctionalType.status }}
  </option>
</select>

TS

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  isFeelValueChanged = false;
  fee: number;
  optionSelected = '';
  buttonTitle = 'SAVE APPROVALS';
  feeFunctionalTypes = [{
      status: 'Pending'
    },
    {
      status: 'Interim'
    },
    {
      status: 'Final'
    },
  ];

  constructor() {}

  inputChanged() {
    this.isFeelValueChanged = true;
    this.updateLabels();
  }

  hideOption(option: string) {
    if (option !== 'Pending' && this.fee) {
      return true;
    }
    return false;
  }

  updateLabels() {
    if (this.fee && this.isFeelValueChanged) {
      this.buttonTitle = 'SAVE FEE';
      this.optionSelected = 'Pending';
    } else {
      this.buttonTitle = 'SAVE APPROVALS';
      this.optionSelected = '';
    }
  }
}