When Angular 5 is loaded, the select list on the page will automatically display the matching option that

I am currently working on a form that is read-only and showcases data retrieved upon loading the page. One of the sections in this form includes an IsActive dropdownlist with options True or False. I have set up my model property isActive to bind with the boolean value retrieved from the database during the ngOnInit phase. My aim is to display the model value along with its corresponding dropdown selection. For instance, if the IsActive flag is true, I want the true option in the dropdown to be pre-selected when the page loads.

Here is the HTML code snippet:

<label class="col-md-2 col-form-label">Is Active</label>
    <div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
            <option [value]="1">True</option>
            <option [value]="0">False</option>
        </select>
    </div>

However, the above code results in a blank selected option upon page load, only revealing the true and false options once clicked.

angulartypescriptangular5dropdown

Answer №1

If you give it a shot, it should work like a charm

option : any = [];
selectedAccount: any;
ngOnInit(){
this.selectedAccount.isActive = true;
this.option = [{"name": "true", value: true}, {name: "false", value: false}]
this.option.map(res =>{ if (res.value == this.selectedAccount.isActive){
  this.selected = res
}
});

}
<div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
        <option *ngFor="let option of selected" value={{option.value}}>{{option.name}}</option>
        </select>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 - Updating a specific value with a click

Using the code snippet below, an autocomplete feature based on Google Places API can be implemented. As characters are typed into the input fields, the code fetches and displays a list of place names. The goal is to have the selected 'place' repl ...

angularionic2

Making a REST API call with an ID parameter using Angular

I am currently working on an Angular application that interacts with a REST API. The data fetched from the API is determined based on the customer ID, for example: api/incident?customer_id=7. I am unsure of how to incorporate this into the API URL and serv ...

javascriptangular

Typescript Event Handling in React Select

I am facing an issue with my handleSelect function: const handlerSelectBank = (event: React.ChangeEvent<{ value: unknown }>) => { setState({ ...state, buttonDisabled: false, selectedBank: event }); }; Upon execution, I encountered ...

reactjstypescriptreact-select

Angular: adding a component to the root module

I'm currently learning Angular and I've created an Angular project with the following file structure: Angular Project File Structure data-table.component.ts: import { Component, OnInit, PipeTransform, Pipe, Input } from '@angular/core&apos ...

angular

Creating a carousel with material design aesthetics

I'm working on implementing a carousel in my setup using Angular CLI: 6.0.5, Node: 10.1.0, OS: win32 x64, and Angular: 6.0.3. However, I haven't been able to locate documentation for creating the carousel in Angular's Material Design framewo ...

angulartypescriptmaterial-designcarouselangular6

Looping through template reference of material chip input using ngFor

I'm attempting to dynamically loop and generate Material chip inputs, as shown below: <section *ngFor="let basket of baskets"> <mat-form-field class="example-chip-list"> <mat-chip-list #chipList aria-label="Fruit selection"> ...

angular

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...

javascripthtmlangulartypescriptfuse

Utilize Angular to fetch API and obtain token through a proxy server

I'm curious about how to consume an API that is already published on a website. Let's say the API endpoint is and it returns a JSON with a token like "12jd3..". How can I achieve this from my Angular application? In order to access the API, I co ...

angularproxy

Angular Unit Test with SignalR: An issue occurred during the server negotiation process, resulting in a 'Not Found' error

Currently, I am working on an Angular 9 project with Asp.Net Core that utilizes SignalR. While everything is functioning correctly in the application, I am facing a challenge in performing proper unit testing on the component that integrates the signalr se ...

angularunit-testingsignalrkarma-jasmine

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...

cssangulartypescriptbootstrap-4mdbootstrap

The data structure '{ recipe: null; }' cannot be matched with type 'IntrinsicAttributes & Recipe'

Currently, I am working on an app that integrates ChatGPT to fetch recipes based on user-input ingredients. After receiving the JSON response from CGPT, I aim to display a Recipe "Card" component. However, I encounter an error titled above when attempting ...

typescriptnext.js

What happens when i18next's fallbackLng takes precedence over changeLanguage?

I am currently developing a Node.js app with support for multi-language functionality based on the URL query string. I have implemented the i18next module in my project. Below is a snippet from my main index.ts file: ... import i18next from 'i18next& ...

node.jstypescriptexpressi18next

Whenever the route changes in Angular, the components are duplicated

Whenever I switch routes in my Angular application, such as going from home to settings and back to home, all the variables seem to be duplicated from the home page and are never destroyed. I noticed that I created a loop in the home component that displa ...

angulartypescriptionic-frameworkrouter

Best practice for managing asynchronous calls and returns in TypeScript

I’ve recently started working on an Ionic 4 project, delving into the realms of Javascript / Typescript for the first time. Understanding async / await / promise seems to be a bit challenging for me. Here’s the scenario: In one of the pages of my app ...

javascripttypescriptpromise

Analyze two sets of JSON data and compile a new JSON containing only the shared values

I am trying to generate two JSON arrays based on a shared property value from comparing two sets of JSON data. this.linkedParticipants =[ { "id": 3, "name": "Participant 2", "email": "<a href="/ ...

javascriptjquerytypescript

Unable to change the directory for angular2/core - having issues with updating

Whenever I include the following code in my app.component.ts: import {Component} from 'angular2/core'; My application runs successfully, but the compiler throws an error saying Error:(1, 25) TS2307: Cannot find module 'angular2/core', ...

typescriptangular

Issue with PrimeNG functionality in Angular4 environment

I encountered an issue while trying to implement PrimeNG into my Angular 4 project. Despite following the setup steps outlined on their website, I received an error message when attempting to import a module. Here's an example of the error: Can' ...

angularprimeng

Issues arise when attempting to read data from a JSON file upon refreshing the Angular page

Currently, I am working on an Angular application where the client has requested to have the path of the backend stored in a JSON file. This will allow them to easily modify the path without requiring another deployment. I have implemented this feature su ...

jsonangular

The Angular2 Mvc5 demonstration application is experiencing compilation errors

I recently started using Visual Studio Enterprise 2015 Update 3 and decided to create a new project called "Angular2 Mvc5 sample application" from the templates available online. However, upon compiling the project, I encountered numerous errors such as: ...

angularvisual-studio-2015

Establishing a standard value for a class that can be injected

Here is my desired approach: @Injectable() export class MyInjectableClass { constructor(timeout: number = 0) { } } The goal is to have the timeout set to 0 when it's injected, but allow the calling code to specify a different value when constr ...

angulardependency-injection