use ngfor to make a dropdown in angular from array 1

use ngfor to make a dropdown in angular from array



Here is what the above code is Doing:
1. We have a select element with a ngModel directive.
2. We have an option element for each person in the people array.
3. We have a div element with a class of show-info.

The ngModel directive binds the selected person object to the component.

The ngFor directive iterates over the people array and creates an option element for each person.

The ngValue directive sets the value property of the option element to the person object.

The option element’s text content is set to the person’s name.

The div element is empty. We’ll use it to display the selected person’s name.

Now let’s add some code to the component class to display the selected person’s name.

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
people: any[] = [
{
“name”: “Douglas Pace”,
“age”: 35,
“country”: ‘MARS’
},
{
“name”: “Mcleod Mueller”,
“age”: 32,
“country”: ‘USA’
},
{
“name”: “Day Meyers”,
“age”: 21,
“country”: ‘HK’
},
{
“name”: “Aguirre Ellis”,
“age”: 34,
“country”: ‘UK’
},
{
“name”: “Cook Tyson”,
“age”: 32,
“country”: ‘USA’
}
];
selected: any;
}

Similar Posts