How to use Datalist with dynamic json in angular 8

Question

I am using datalist whose options are coming from dynamic json. I am also using value in the options which is also coming with the selection list of dropdown. How to remove that value from selection,can anyone please help me. Here is the code below.

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 problem is because datalist should have only value like this example

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

So in your case should be

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