Angular DropDown - Unable to display value on View - html

Question

In my component I have 2 Strings that I need to display on Angular Form as Dropdown, I am struggling to get the values on HTML page
Demo - https://stackblitz.com/edit/angular-dc4s7d?file=src%2Fapp%2Fapp.component.ts
Here is my ts code
export class EmployeeComponent implements OnInit {
constructor(public employeeService: EmployeeService) {}
public listItem: string[];
ngOnInit() {
this.listItem = ["A", "B"]; ----->>>>> Dropdown values
}
Html code
<div class="m-3 input-group; padding:10px; color:red; border: 3px solid ">
<span class="input-group-text">Type</span>
<select type="text" name="type" #type="ngModel"
[(ngModel)]="employeeService.selectedEmployee.type "placeholder="Type">
<option *ngFor="let dl of listItem" [value]="dl">{{dl}}</option>
</select>
</div>

Answer 1

Something may be wrong with your code but I can provide you a sample code to bind data with dropdown list. Please check and let me know.
HTML
<select name="city" (change)="onChange($event.target.value)">
<option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
</select>
TS:
countries = [{
id: 1, name: 'France', cities: ['Paris', 'Marseille', 'Nice']
},
{
id: 2, name: 'Germany', cities: ['Hamburg', 'Berlin', 'Munich']
},
{
id: 3, name: 'Italy', cities: ['Roma', 'Milan', 'Napoli']
},
];
onChange(deviceValue) {
//do something
}
Note: Please Check the link of Stackblitz for more information LINK
NEW UPDATE
I think employeeService.selectedEmployee is not available on that link. That's the reason why your code was not working and You have to make a little change in listitem. Finally, code will look like =>
TS:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
selectedtype: any;
listItems= [{ name: 'A'},{ name: 'B'}];
ngOnInit() {
}
onChange(deviceValue) {
}
}
HTML:
<select name="dt" (change)="onChange($event.target.value)"
[(ngModel)]="selectedtype" placeholder="Type"
#type="ngModel" type="text">
<option *ngFor="let data of listItems" [value]="data.name">{{data.name}}</option>
</select>
NOTE: Provide link contain 4 errors.

Answer 2

Try Using :
You need to initialize your selectedEmployee in you service file
#Injectable({
providedIn: "root"
})
export class EmployeeService {
public selectedEmployee: Employee = {
_id: '',
name: '',
date: null,
designation: '',
salary: null,
type: null
};
constructor() {}
}
Check in your stackblitz demo path.
I think this will help you...