I have a simple <select> in Angular (with Material) as follows:
<mat-form-field>
<mat-label>Type</mat-label>
<mat-select placeholder="Type" formControlName="type" name="type" id="name">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types" [value]="t">
{{t}} <-- it is enum -->
</mat-option>
</mat-select>
</mat-form-field>
I would like to use index of selected type in the other part of code.
To be more precise: in *ngFor of another select. Therefore, I can't use documentById.
In addition, I don't want to install jQuery just for do this.
Is it possible?
As suggested by this Angular Material Documentation example, you can bind to [(value)] two ways:
<mat-form-field>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types; let i = index" [value]="i">{{t}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
selected will be a property on your class.
Here's a Working StackBlitz from the Angular Team for your reference.
You can simply set [(ngModel)] variable and use the variable to get your index
<mat-select placeholder="Type" [(ngModel)]="selected" formControlName="type" name="type" id="name">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types" [value]="t">
{{t}} <-- it is enum -->
</mat-option>
</mat-select>
and then in the component, use
this.index = this.types.findIndex(item => item === selected);
Per Sajeetharans answer, using ngModel together with reactive form is not recommended, and is also deprecated. Instead watch for the changes of the form control and find the index and store it in a variable for later use. Here's a sample:
myForm: FormGroup;
idx: number;
foods = ['Steak', 'pizza-1'];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
mySelect: ['']
});
this.myForm.get('mySelect').valueChanges.subscribe((value) => {
this.idx = this.foods.findIndex(val => val === value);
console.log(this.idx)
});
}
Related
I am trying to implement the autocomplete component of Angular Material:
It works fine, it at least displays and I see the data from my json. Is there a way to route on click of the event, that is when something is selected from the autocomplete to a page?
My HTML currently looks like this:
<div class="example-form">
<div class="container">
<form [formGroup]="schoolForm">
<mat-form-field class="example-form">
<input type="text" matInput placeholder="Gib den Namen deiner Schule ein" formControlName="schoolGroup" required
[matAutocomplete]="autoGroup">
<mat-autocomplete #autoGroup="matAutocomplete">
<mat-optgroup *ngFor="let group of schoolGroupOptions | async" [label]="group.letter">
<mat-option *ngFor="let name of group.names" [value]="name">
{{name}}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</mat-form-field>
</form>
<form [formGroup]="schoolForm">
<mat-form-field class="example-form1">
<input type="text" matInput placeholder="Gib den Nachnamen deines Lehrers ein">
</mat-form-field>
</form>
</div>
<button mat-raised-button color="primary" routerLink="/teachers">Ergebnisse anzeigen</button>
</div>
how should the TS. look like?
Thx for your help
Looking at the documentation we see that MatAutoComplete exposes an event when an option is selected.
#Output() optionSelected
Reading further, we need to add [matAutocomplete] as a directive onto our text input, and pass it a reference to the auto-complete in our template.
To do this, I create a mat-autocomplete and give it the template literal name of #navigable which we pass into the [matAutocomplete] directive.
This gives us the following html template
<mat-form-field>
<input type="text" matInput [matAutocomplete]="navigable">
<mat-autocomplete #navigable (optionSelected)="chooseOption($event)">
<mat-option *ngFor="let group of groups" [value]="group.route">{{group.name}}</mat-option>
</mat-autocomplete>
</mat-form-field>
Note we can bind to (optionSelected) on the mat-autocomplete as it is the event stated in the API to be called when the value is selected for our attached input.
in our .ts file
#Component()
export class MyExampleComponent {
// group dummy object, hard-coded for demonstration purposes
// I've chosen to store the route directly on the group.
// You should choose whichever strategy suits your needs
groups = [
{
name: "One",
route: 'one'
},
{
name: "Two",
route: 'two'
},
{
name: "Three",
route: 'three'
}
];
// inject router for navigation
constructor(private router: Router) {}
chooseOption(event: MatAutocompleteSelectedEvent) {
// destructure the value and navigate.
const {option: {value}} = event
this.router.navigate([value]);
}
}
and that is it. We will now navigate as soon as an option is selected in the dropdown list.
I am using mat-select within Angular Material as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above dropdown is coming up fine but the dropdown has no default value.
In order to add a default value, I have added value="{{dropdownSelectedName}}" as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" value="{{dropdownSelectedName}}">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above change is still not populating the default dropdown value.
I have also tried doing [(value)]="dropdownSelectedName"
When I do console.log(this.dropdownSelectedName) in the component, I can see that it has a string value
mydefaultvalue
ngOnInit() {
this.subs.sink = this.myService.listAll()
.subscribe(r => {
this.AllList = r;
});
this.dropdownSelectedName = "mydefaultvalue";
}
To set a default value to mat-select, you have to bind compareWith property, which will compare the values and will set the default value.
Example:
In your HTML:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" [(ngModel)]="dropdownSelectedName" [compareWith]="compareFn">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
In your TS:
compareFn(obj1: any, obj2: any) {
return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}
the value of your mat-option is a object reference to a item Object.
therefore the value that you set on mat-select must be the exact same item object reference.
this means that in your compoenent your code should
this.dropdownSelectedName = [Insert Object Reference Here]
the alternative approach is to change your mat-option to set
<mat-option *ngFor="let item of itemList" [value]="item.name">
{{item.name}}
<mat-option>
with this change your "myDefaultValue" would match the value of one of the options, instead of being an object reference
Update
Here is a link that shows a working version of setting the value of the select when using object references.
I have a multiple select form:
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
I want to display options that user selected under the form with <p>You selected: {{selected}}</p>, but if I do it this way I get when I select 3 toppings:
You Selected: [object Object],[object Object],[object Object]
Now I tried <p>You selected: {{selected?.value}}</p> I don't get any entry.
The only solution I have found so far is:
<p>You selected: {{selected | json}}</p> but I do not want whole json object just value property.
How do I get it to display:
You selected: option1, option2, option3
?
Printing "[object, object]" means you are trying to use an object as a string.
toppings is an array of objects. You are looping through this array with let topping of toppings and assigning an object to topping.
{{topping.value}} prints the string in the .value property of topping object but you assigned back the whole object in [value]="topping".
This way selected becomes an array of objects although you are only seeing strings while clicking on options.
Two ways to achieve what you want;
- Pass string from options
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping.value">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
- Loop through selected array
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected:
<span *ngFor="let s of selected; let f = first; let l = last;">
{{s.value}}
<span *ngIf="!(f && l) && !l">,</span>
</span>
</p>
I hope this helps you clarify angular templating and data binding.
Try Changing your HTML to :-
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected | json}}</p>
You can either make a new property on the component to bind in the template, or make a new pipe to display comma-delimited items.
Without a pipe:
get displaySelections(): string {
return this.selections.map(s => s.value).join(', ');
}
<p>You selected: {{displaySelections}}</p>
With a pipe, you can re-use in other components as well, and you don't need to add the getter:
#Pipe({
name: 'join'
})
export class JoinPipe implements PipeTransform {
transform(value: {value: any}[]): string {
return value.map(v => v.value).join(', ');
}
}
<p>You selected: {{ selections | join }}</p>
I have an ASP.NET Web API with Angular 7 material design client side. I want to assign a role to a current user,
I have a user that I'm trying to assign a role to. I've got the .Net part working, but I can not figure out how to implement it on the angular side. I'm not sure if I'm getting the select dropdown correctly implemented.
In my console.log(), the role is coming up as 'undefined'. Any help is appreciated.
The below is the current code.
ASP.NET Web API
[HttpPost]
public async Task<IActionResult> Role(Roles role)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
try
{
var assignRole = await _contextFile.AddRoles(role.Email, role.UserRoles);
}
catch (Exception ex)
{
throw ex;
}
return Ok();
}
Angular 7
Service
userRole(email: string, role: string){
return this.http.post(this.Url + {email, role});
}
populateDropdownRoles(){
return this.http.get(this.roleUrl);
}
.ts file
assignRole() {
this.roleService.userRole(this.user.email, this.role);
}
dropdownRole() {
this.roleService.populateDropdownRoles();
}
.html file
<form (ngSubmit)="assignRole()">
<mat-form-field>
<input
matInput
placeholder="Email"
name="email"
value="{{ user.email}}"
/>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Role">
<mat-option *ngFor="let role of roles" name ="rolename" [(ngModel)]="role.rolename" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
<button
mat-raised-button
type="submit"
>
Assign
</button>
</form>
I just mocked this up really quickly which is working. You may have to modify some of the variable names.
Moved [(ngModel)] and name to the <mat-select> element.
Declared the variable that is being bound to [(ngModel)] inside component class.
Printed out selected value in assignRole() method.
NOTE: This is assuming your are successfully receiving role values back from your API. I added a mock roles array inside the component class.
component.ts
#Component({
selector: 'app-roles-form',
templateUrl: './roles-form.component.html',
styleUrls: ['./roles-form.component.css']
})
export class RolesFormComponent implements OnInit {
public roles = [{ rolename: 'user' }, { rolename: 'admin' }];
public selectedRole: any;
constructor() { }
ngOnInit() {
}
assignRole() {
console.log('selectedRole: ', this.selectedRole);
}
}
component.html
<form (ngSubmit)="assignRole()">
<mat-form-field>
<mat-select placeholder="Role" [(ngModel)]="selectedRole" name="selectedRole">
<mat-option *ngFor="let role of roles" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button type="submit">
Assign
</button>
</form>
DOCS
https://stackblitz.com/angular/gokjjqynqvo?file=main.ts
https://material.angular.io/components/select/overview
A few things I noticed: The name of you model in the controller is role and it is a string according to the parameters received in the service method, so you should use [(ngModel)]="role" and also I think you should put it at the mat-select tag not the mat-option. So your html should look something like this.
<mat-form-field>
<mat-select [(ngModel)]="role" name ="role" placeholder="Role">
<mat-option *ngFor="let role of roles" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
PS: I would suggest you change the name of the model to roleName. like this.roleName and [(ngModel)]="roleName" name ="roleName" it would be less confusing for you.
You could check the example here
You have the ngModel wrong, ngModel goes on the control, not the options.
<mat-select [(ngModel)]="role" name ="rolename" placeholder="Role">
<mat-option *ngFor="let role of roles" [value]="role.rolename">
{{role.rolename}}
</mat-option>
</mat-select>
After that you need to check on the .Net part the structure of the class Role because, if my memory is not failing, the UserRoles property is a list of selected roles, if that is correct you need to send an array of roles, not just one role.
I'm building a web form that is supposed to be dynamic.
When a user selects an option from a list, the next form inputs are generated based on his input.
For instance:
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)">
<mat-option [value]="0">Treatment</mat-option>
<mat-option [value]="1">Travel</mat-option>
<mat-option [value]="2">Medication</mat-option>
<mat-option [value]="3">Equipment</mat-option>
</mat-select>
</mat-form-field>
If he selects Type 'Treatment', he gets another selection input with some options with a few other inputs, and if he selects a different Type, he gets different options and other inputs.
I understand that I need to dynamically generate HTML content, and maybe a dynamic component.
What is the best approach to do this in an easy way?
I'd suggest creating a component for each sub-form and then *ngIf them based on the selected option, like so:
<!-- component.html -->
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="onTypeChosen(row.Type, row)">
<mat-option [value]="0">Treatment</mat-option>
<mat-option [value]="1">Travel</mat-option>
<mat-option [value]="2">Medication</mat-option>
<mat-option [value]="3">Equipment</mat-option>
</mat-select>
</mat-form-field>
<my-treatment-component *ngIf="type === 0" [someInput]="'some value'"></my-treatment-component>
<my-travel-component *ngIf="type === 1" [somethingElse]="true"></my-travel-component>
<my-medication-component *ngIf="type === 2" (someOutput)="onMedicationOutput($event)"></my-medication-component>
<my-equipment-component *ngIf="type === 3"></my-equipment-component>
If you already have something holding your Type selection, you can bind that to the *ngIfs instead. If not, create a field in your controller class and hold the selected type in there.
// component.ts
public type: number | null = null;
public onTypeChosen(type: number, row): void {
this.type = type;
}
If your sub-forms have parts that are re-usable (or are basically the same, sans configuration), it's generally a good practice to extract the re-usable code into components in and of themselves and compose them together.
Hope this helps a little :-)
To Add the options dynamically, angular provide ( *ngFor ).
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)" *ngFor="let option of options; let i = index">
<mat-option (click)="updateOptions(option)" [value]="{{i}}">option.text</mat-option>
</mat-select>
</mat-form-field>
in your controller .ts
private options = [];
private initOptions(){
this.options = [
{text:'Treatment' , possibleOptionsRelates:[text:'possible1']},
{text:'Travel' , possibleOptionsRelates:[text:'possible12']},
{text:'Medication' , possibleOptionsRelates:[text:'possible13']}];
}
private updateOptions(option){
this.options.push(...option.possibleOptionsRelates);
}