The actually problem was that my angular is not working at all
if you want to test this do this :
import { Component, OnInit} from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
console.log('test');
}
}
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
I'm trying to create a dropdownlist with a name and value different from each other. In Visual studio 2015 the brackets at ">{{directionOption.name}}<" are shown grey as plain text
<select [(ngModel)]="direction">
<option *ngFor="#directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
</select>
same result
<select [(ngModel)]="direction">
<option *ngFor="let directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
</select>
export class AppComponent implements OnInit {
direction: any = { 'Left': 'L' };
directionOptions: any = [{ name: 'Left', value: 'L' }, { name: 'Right', value: 'R' }, { name: 'None', value: 'N' }];
}
The current result inside browser F12
<option *ngfor="#directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
Use let keyword instead of #,
<option *ngfor="let directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
update
Angular2 doesn't process bindings added dynamically to the DOM, only when they are added statically to a components template.
original
directionOptions should look like
directionOptions: any = [{ name: 'Left' , value: 'L' }, { name: 'Right' , value: 'R' }, { name: 'None' , value: 'N' }];
Related
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>
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.
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...
I have a select dropdown ,I am getting option's data and value from an array through loop. Here I need to get the value of selected drop down when page loads without onchange(in this case Recent). Here is code below.
app.component.html
<select>
<option *ngFor="let v of values" [value]="v.id">
{{v.name}}
</option>
</select>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'projectchart';
public values = [
{ id: 3432, name: "Recent" },
{ id: 3442, name: "Most Popular" },
{ id: 3352, name: "Rating" }
];
ngOnInit(){
alert('The default selected value is');
}
}
you could make use of reactive forms
constructor(private fb: FormBuilder) { }
// create a form group using the form builder service
formName = this.fb.group({
name: ['']
})
in the template
<form [formGroup]="formName">
<select formControlName="name">
<option *ngFor="let v of values" [value]="v.id">
{{v.name}}
</option>
</select>
</>
and then get the value in the ts:
this.formName.controls['name'].value
I need some help understanding how to use the HTML datalist with Angular. I have an object here. I would like the dropdown to display the make and model of the cars. But when you select a car, the selectedCar variable should be the entire car object. But the input should still only show the make and model.
cars = [{
make: 'Ford',
model: 'GTX',
color: 'green'
}, {
make: 'Ferarri',
model: 'Enzo',
color: 'red'
}, {
make: 'VW',
model: 'Amarok',
color: 'white'
}]
...
<input list="id-car" [(ngModel)]="selectedCar">
<datalist id="id-car">
<option *ngFor="let car of cars" [value]="car">{{car.make}} - {{car.model}}</option>
</datalist>
Here is a place to play with this: https://stackblitz.com/edit/angular-cwmwke
Using datalist with not get you what you wish in this case.. here is the code that partially works. After selecting any element the dropdown will not show as it was showing before.
try using select with option. This link can help you more DataList in Angular
html file
<input list="id-car" [(ngModel)]="selectedCar"
value="{{selectedCarObj.model}} - {{selectedCarObj.make}}"
(ngModelChange)="onChange()">
<datalist id="id-car">
<option *ngFor="let car of cars" [value]="car.make">{{car.make}} - {{car.model}}</option>
</datalist>
{{selectedCarObj.model}} - {{selectedCarObj.make}}
typescript file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
cars = [{
make: 'Ford',
model: 'GTX',
color: 'green'
}, {
make: 'Ferarri',
model: 'Enzo',
color: 'red'
}, {
make: 'VW',
model: 'Amarok',
color: 'white'
}];
selectedCar = "";
selectedCarObj = {};
onChange = () => {
this.selectedCarObj = this.cars.find((c)=> c .make==this.selectedCar);
console.log(this.selectedCarObj)
}
}
I'm unsure if this is an Angular issue, or a general restriction of HTML forms.
I would like a select form with three values: true, false, and, undefined. See this Stackblitz or code below.
<mat-form-field [formGroup]="form">
<mat-select formControlName="test" value="undefined">
<mat-option *ngFor="let v of values"
[value]="v.value">{{ v.display }}</mat-option>
</mat-select>
</mat-form-field>
...and the corresponding .ts file:
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public form: FormGroup;
public readonly values: any[] = [
{
display: 'true',
value: true
},
{
display: 'false',
value: false
},
{
display: '--',
value: undefined
}
];
constructor(private readonly fb: FormBuilder) {
this.form = this.fb.group({
test: undefined
});
}
}
However, while hard-coding test to true or false works:
this.form = this.fb.group({
test: true // 'true' or 'false' selected in form.
});
...undefined does not:
this.form = this.fb.group({
test: undefined // '--' option is *not* selected.
});
Setting anything to undefined is considered a bad practice.
In this particular case, probably the best solution is to use empty string as a default value.
If you look into material's code you will see that null/undefined is treated as special reset value: Material Source
I want to ask about how I can set option to be default selected?
<form [formGroup]="form2">
<select formControlName="drop">
<option disabled>Choose one</option>
<option *ngFor="let example of examples" [value]="example.id" [disabled]="example.isDisabled" [selected]="example.isSelected">{{ example.name }}</option>
</select>
</form>
Component:
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormControl, Validators } from '#angular/forms';
#Component({
selector: 'app-drop-down-list',
templateUrl: './drop-down-list.component.html',
styleUrls: ['./drop-down-list.component.css']
})
export class DropDownListComponent implements OnInit {
public form = new FormGroup({
drop: new FormControl('',
Validators.required,
),
});
public form2 = new FormGroup({
drop: new FormControl('',
Validators.required,
),
});
examples = [{
id: 1, name: 'Test1', isSelected: false, isDisabled: true,
},
{
id: 2, name: 'Test2', isSelected: true, isDisabled: false,
},
{
id: 3, name: 'Test3', isDisabled: false,
}
];
constructor() { }
ngOnInit() {
}
onSubmit(form) {
console.log(form);
}
}
I was searching on stack but I don't want to mix reactive forms with ngModel, also I don't wan't to use patchValue because It only set default value without choosing element in list. Thanks for help!
if you want option to be selected then do like this , just pass id value in your formcontrol intialization
public form2 = new FormGroup({
drop: new FormControl(this.examples[0].id,
Validators.required,
),
});
or if you dont want to initialization immediately and want later on then make use of setValue method, below is required when you are fecthing data from server and want to set value i just hard coded value just to show as example , you should replace with the value you get from server
form2.get('drop').setValue('1');
html should be as below no need of [selected]
<select formControlName="drop">
<option disabled>Choose one</option>
<option *ngFor="let example of examples" [value]="example.id" [disabled]="example.isDisabled" >{{ example.name }}</option>
</select>