Assigning a Value to a Dropdown Menu in Angular

Question

Assigning a Value to a Dropdown Menu in Angular

I have some JSON data that contains a True/False value. Depending on whether it is true or false, I want a specific option in a Select Dropdown to be automatically selected.

This is the HTML code using Angular 16:

<select name="reportNo" id="reportNo" class="form-select" [(ngModel)]="reportInfo.active">
      <option value="true"> Activated </option>
      <option value="false"> Deactivated </option>
</select>

Here is an example of the JSON data:

"reportInfo": {
   "active": true,
}

If the "active" value is true, then the option for "Activated" should be selected. Otherwise, if it is false, the "Deactivated" option should be selected.

javascript angular typescript select dropdown

Answer 1

Answer №1

Here is an example of code that works perfectly!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <select name="reportNo" id="reportNo" class="bea-form-select" [(ngModel)]="reportInfo.active">
      <option value="true"> Activated </option>
      <option value="false"> Deactivated </option>
</select>  
{{reportInfo.active}}
  `,
})
export class App {
  reportInfo = {
    active: true,
  };
}

bootstrapApplication(App);

Check out the demo on StackBlitz

Answer 2

Here is an example of code that works perfectly!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <select name="reportNo" id="reportNo" class="bea-form-select" [(ngModel)]="reportInfo.active">
      <option value="true"> Activated </option>
      <option value="false"> Deactivated </option>
</select>  
{{reportInfo.active}}
  `,
})
export class App {
  reportInfo = {
    active: true,
  };
}

bootstrapApplication(App);

Check out the demo on StackBlitz

Assigning a Value to a Dropdown Menu in Angular

Answer №1

Similar questions

An assortment of the most similar values from a pair of arrays

javascript: window.open()

Exploring nested routes with HashRouter in React

Error: The function User.findOne is not recognized

shared interfaces in a complete javascript application

cycle through several handlebars entities

"Learn the steps to access a JSON file directly from a URL within a Next.js

I am experiencing an issue where localhost is not displaying the JSON output for the Router and controller that I have

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

Function that returns an Observable<Boolean> value is null following a catch block

How to display text on a new line using HTML and CSS?

Occasionally, data may fail to be fetched when using a Jquery GET

Creating connections between different services and components

Issue: Debug Failure. Invalid expression: import= for internal module references should have been addressed in a previous transformer

What is the best way to display long text in a browser alert without it being cut off?

Steps for removing an element from an array using Mongoose and Node.js

Using Node.js for a game loop provides a more accurate alternative to setInterval

Setting up the Angular 2 router to function from the /src subfolder

Using Typescript for Asynchronous Https Requests

What is the best method for implementing click functionality to elements that share a common class using only pure JavaScript