Utilizing Datalist with dynamic JSON data in Angular 8: A comprehensive guide

I have a dynamic json feeding options into a datalist. The options also include a value attribute that appears in the dropdown selection list. How can I remove this value from the selection? Any help is appreciated. Here's the code snippet:

home.component.html

<div>
<input type="text"  list="codes">
<datalist id="codes">
  <option *ngFor="let c of statusdata" [value]="c.id" >{{c.name}}</option>
</datalist>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  statusdata: any;

  ngOnInit() {

      this.statusdata = [{ id: 1, name: 'Angular 2+' },
    { id: 2, name: 'Angular 4' },
    { id: 3, name: 'Angular 5' },
    { id: 4, name: 'Angular 6' },
    { id: 5, name: 'Angular 7' }
  ];
  }
}

Answer №1

The issue arises because the datalist should only contain values in a specific format, like demonstrated in this example

<input list="data" name="data">
<datalist id="data">
  <option value="data01">
  <option value="data02">
</datalist>

Therefore, in your situation it should be

<option *ngFor="let c of statusdata" [value]="c.name">

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

Troubleshooting problem with Electron and TypeScript following recent updates

I recently made updates to my small Electron project using Electron and TypeScript. Here's the code causing issues: dialog.showOpenDialog({}, (files) => { if(files && files.length > 0) { fs.readFile(files[0], 'utf8' ...

Aggregate the values in an array and organize them into an object based on their frequency

I have an array of information structured like this: 0: { first: "sea", second: "deniz", languageId: "English-Turkish"} 1: { first: "play", second: "oynamak", languageId: "English-Turkish&qu ...

Having trouble reinstalling node_module in angular

Struggling with importing Angular Material, I followed advice to delete the node_modules folder and run npm install to resolve the issue. However, now the node_modules folder is not being generated again when running npm install. Upon starting my applica ...

Is there a way to tidy up the surplus space between the variable and dot in Angular?

I'm experiencing an issue with spacing in the rendered HTML of my Angular template that includes a condition block with ng-container. How can I resolve this issue? This is the template section causing the problem: <span&g ...

Ensure that an input field is mandatory only when another field contains a value in Angular 6

I am working with two input controls in my Angular 6 project. The first control looks like this: <input type="text" [(ngModel)]="UserData.FirstControl" formControlName="FirstControl" class="form-control" maxlength="8" > T ...

How can I send a value to an Angular element web component by clicking a button with JavaScript?

I want to update the value of an input in an Angular component by clicking on a button that is outside of the Angular Element. How can I achieve this in order to display the updated value in the UI? Sample HTML Code: <second-hello test="First Value"&g ...

Removing punctuation from time duration using Moment.js duration format can be achieved through a simple process

Currently, I am utilizing the moment duration format library to calculate the total duration of time. It is working as expected, but a slight issue arises when the time duration exceeds 4 digits - it automatically adds a comma in the hours section (similar ...

Ways to Execute the Constructor or ngOnInit Multiple Times

Here's the scenario I'm facing: I have developed an app with multiple screens. One of these screens displays a list of articles. When a user clicks on an article, they are directed to another screen that shows the details of that specific item. ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

Troubleshooting error handling in Angular 2 and Web API when using Chrome versus Internet Explorer for HTTP PUT requests

Currently, I am working on integrating Angular 2 with Web API in a test project to enhance my skills. However, I have encountered an issue while using the http.put method and would greatly appreciate any insights on this. So far, I have successfully manag ...

What is the best way to fill a dropdown menu with the keys from an object?

Below is an example of the object I have: { "USD": { "symbol": "$", "name": "US Dollar", "symbol_native": "$", "decimal_digits": 2, "rounding": 0, "code": "USD", "name_plural": "US dollars" }, "CAD": { "symbol": "CA$" ...

bidirectional data binding with programmatically generated input boxes

Is it possible to achieve two-way binding with dynamically created checkboxes? quali=[{class:"10",checked:false},{class:"12",checked:true},{class:"others",checked:true}]; <span *ngFor="let q_list of quali; let i=index" class="lists">  <in ...

The 'type' property is not defined in the current type, however, it is expected in the 'Props' type

https://i.sstatic.net/7bD1N.pngI encountered an unusual typescript error in my IDE on line 16 when I was converting my React ES6 component to TypeScript. The error pertains to a chart component that utilizes react-chartjs-2. The error message states that ...

Passing a React functional component with SVG properties to another component as a prop

My goal is to import a React functionComponent from an SVG and pass it as a prop to another component for rendering the svg. The code below compiles without errors, but crashes when trying to display the svg in the browser with the following message: Er ...

Having difficulties establishing a connection with the websocket URL generated by Spark Java

I'm currently working on creating a websocket using the sparkjava framework. Here is the code snippet for setting up the websocket: public final class MainWS { static Map<Session, String> USER_SESSION_MAP = new ConcurrentHashMap<>(); stat ...

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

The error message indicates a change in the binding value within the template, resulting in an

This is the structure of my component A : <nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" badgeStatus="info"> <app-center-pictures #centerPictures [center]="center"> ...

Problem with connecting Angular data

<body ng-app="myAPP"> <div ng-controller="employeeCtrl"> <table style="border:1px solid gray"> <tr> <th>Employee Name</th> <th>Employee Address</th> <th> ...

"Seamlessly incorporating an Angular project into a React environment

Seeking advice on integrating a React website project with an Angular widget project. Does anyone have suggestions for combining the two together seamlessly? ...

What is the title of the commonly used state management approach in rxjs? Are there any constraints associated with it?

When working with Angular applications, it is common to use the following approach to manage shared states: import { BehaviorSubject } from 'rxjs'; interface User { id: number; } class UserService { private _users$ = new BehaviorSubject([]) ...