Is there a way to dynamically change the options in a dropdown menu using Angular?

I am facing an issue where the values in my dropdown list are changing to null when I click on the form. The add function is working correctly, but this update problem is bothering me. Can anyone provide assistance? Below is the snippet of my HTML code:


    <div class="form-group">
        <label for="service">Service</label>
       <select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
            <option value="">Service</option>
      <option value="service.id" *ngFor="let service of services" >{{service.designation}}</option>
        </select>

    </div>
mysqlangularspring-bootfrontenddropdown

Answer №1

It is recommended to utilize variables in your code.

<div class="form-group">
   <label for="service">Service</label>
     <select id="service" class="form-control" [(ngModel)]="{{editPersonne?.service}}" name="serviceId">
        <option value="">Service</option>
        <option [value]="service.id" *ngFor="let service of services" >{{service.designation}}</option>
     </select>
</div>

Alternatively,

<div class="form-group">
   <label for="service">Service</label>
     <select id="service" class="form-control" ngModel="{{editPersonne?.service}}" name="serviceId">
        <option value="">Service</option>
        <option value="{{service.id}}" *ngFor="let service of services" >{{service.designation}}</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

Switching between two distinct templateUrls within an Angular 6 component

When working with Angular 6, we are faced with having two different templates (.html) for each component, and the need to change them based on the deployment environment. We are currently exploring the best practices for accomplishing this task. Some pos ...

angularroutescomponentscommand-line-interfacemultiple-projects

Angular 2's innovative approach to implementing a sticky footer concept

Is there a way to make my footer sticky without being fixed? I attempted using the CSS negative margin trick, but it did not work as expected. In the provided Plunker code, I tried to replicate the issue in my Angular 2 app. The goal is for the footer to s ...

htmlcssangularsticky-footer

Error occurs when Component is used in ngFor

Attempting to implement a component in ngFor as suggested in this Stack Overflow thread results in an error message (Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'false'.). The error occurs w ...

angularngforangular-components

Sending data using formData across multiple levels of a model in Angular

I have a model that I need to fill with data and send it to the server : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode ...

javascriptangulartypescript

Guide on displaying tooltip messages for a custom directive in Visual Studio Code

I have developed a custom directive called app-subscriber. When I hover the mouse over it, I want to display a tooltip message saying "This is for subscribers and requires an email address". Is this achievable? Do I need to create a new VS Code extension f ...

angularvisual-studio-codevscode-extensions

Communication between components through a shared service

Imagine you find yourself in one component and need to trigger a method from another component. There are multiple ways to achieve this, which are explained in more detail on this page. Here, I will demonstrate the simplest possible example of how to make ...

angular

Ways to retrieve the quantity of a particular value within an object using TypeScript

I'm inquiring about how to retrieve the number of a specific value within an object using TypeScript. Here is the structure of the object: obj : TestObject = { name: "test", street: "test" subobj1: { status: warning, time: ...

angulartypescript

Can projects be published on npm and installed from a specific directory?

Currently working on an Angular library project, I am exploring the possibility of publishing the entire library alongside a pre-built angular application either on gitlab or npm. However, my concern lies in ensuring that when a user installs the library v ...

angularnpmgitlab

Tips for generating search engine optimized URLs with category/subcategories/article slug in an Angular application

Currently, I am utilizing Angular 8 Version to develop a news application. My objective is to showcase the link in the following format: www.domain.com/category/category/title and www.domain.com/category. Can you guide me on how to accomplish this task? T ...

angularangular8slug

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

angularsassbootstrap-4

passing data through URL in Angular 7

Looking to pass a parameter in the URL while using Angular 7, to achieve a format like example.com/search/users?q=tom. Below is the syntax I am currently using in my service: public searchUsers(obj):any{ return this._http.get('example.com/s ...

angularangular7

Tips for properly utilizing GeolocationPosition in TypeScript

Our goal is to utilize the Geolocation API to access the user's location. This particular code snippet appears to be functioning well: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position: GeolocationPosition) => conso ...

angulartypescriptw3c-geolocation

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

javascripthtmlarraysangulartypescript

`Angular Image Upload: A Comprehensive Guide`

I'm currently facing a challenge while attempting to upload an image using Angular to a Google storage bucket. Interestingly, everything works perfectly with Postman, but I've hit a roadblock with Angular Typescript. Does anyone have any suggesti ...

javascriptangulartypescripttwitter-bootstrapgoogle-cloud-storage

What is the best way to initialize elements once the data has finished loading?

I am currently working with a service class that retrieves data through HTTP in several methods. For example: filesPerWeek(login: string): Observable<FilesLastActivity[]> { return this.http.get('api/report/user_files_by_week?userId=' + ...

angularchart.js

Issues with SQL query when selecting and joining multiple tables?

I have successfully implemented the following query: $sql = ' SELECT s.rowid , f.fk_soc , s.nom , f.datef , sc.fk_soc , sc.fk_user , u.rowid , u.firstname , u.lastname FROM societe s JOIN societe_com ...

phpmysqlsqlajaxdropdown

Ways to obtain the present value in Angular

Hello, I am looking for assistance in displaying Toast notifications on my View whenever the number of notifications increases (i.e., when new data is added to the database). I have attempted to use this function, but I am unsure how to retrieve the curre ...

angular

Guide to Displaying Individual Observable Information in HTML with Ionic 3

When using Observable to retrieve a single object from Firebase, how can I display this data on an HTML page? I attempted to use {{(postObservable2|async)?.subject}}, but it does not render. Another approach involved AngularFireObject, yet it resulted in ...

angularionic3observableangularfire5

Revising input value post model binding

In my scenario, I have a text input that is bound to a model property of type Date: <input type="text" [(ngModel)]="model.DateStart" ngControl="dateStart" id="dateStart" #dateStart /> The value of model.DateStart (which is of type DateTime) looks l ...

angular

The SQL query is not functioning properly on the server

I'm having trouble with this query on the server, but it works fine in Phpmyadmin on my local host : SELECT * FROM op_theme_certification AS t INNER JOIN op_category_module AS c ON t.cat_mod_id = c.cat_mod_id, (SELECT cat_mod_id, MAX(date_expirati ...

phpmysqlsqlphpmyadmin