I am new to Angular6 and I wanted to know if there is a simple way to do what I want.
I just read documentation and I did not read anything about that, is there a easy way to sort the value in the dropdown ?
<mat-form-field>
<mat-select placeholder="Code List" required [(ngModel)]="contextScheme.codeListId">
<mat-option *ngFor="let codeList of codeLists" [value]="codeList.codeListId">
{{codeList.codeListName}}
</mat-option>
</mat-select>
</mat-form-field>
Basically the value I have are the values in my DB sorted by id, I want the exact thing but sorted in desc.
Thank in advance.
Sox-.
You should do the sorting either on the database backend side, or as suggested by the Angular team in no order-by pipe it should be done inside the component.
E.g. if your have an array in the component, you could use Array.sort
Related
I am using MatDialog and UntypedFormGroup. So from bookcomponent I am either adding new book or editing existing one. I am using same form to edit as well as add new book. For this particular form I am getting authors as observable for firestore and using in the mat-select and storing id of the author in book document like code below
<mat-form-field appearance="fill" *ngIf="author$ | async as authors">
<mat-label>Choose Author</mat-label>
<mat-select formControlName="authorId">
<mat-option *ngFor="let author of authors" [value]="author.id">
{{author.name}}
</mat-option>
</mat-select>
</mat-form-field>
This is working wonderfully in editing and adding new data.
Edit: I want to get selected {{author.name}} with {{author.id}} from above code. Sorry I question was ambiguous.
I am using mat-table in booklistcomponent and I want to have a column named author. I already share certain data from parent to children i.e bookcomponent<>booklistcomponent<>bookformcomponent by using #input() emitter() and MatDialog.
I tried using ngModel but it is not providing desired result. Is their any way I can use my existing code but also can get author.name value as well without any major change in editing or adding new book code. I am stuck on this one for days now please help. Thanks in advance
I have a json structure like the image above.
I just want to get the value from the key name.
I was do Like this :
<span *ngFor="let outlet of products.body | keyvalue">{{outlet.value}}</span>
but that way is to call all attributes, I only want to call attribute name. how do?
Sorry for bad grammar, any suggestion or answer will be appreciate. Thank you
If you only want to get the value of name key, there is no need to use *ngFor.
It's enough to put it directly as follows.
<span>{{ products?.body?.name }}</span>
Please bind
{{outlet.name}}
instead of {{outlet.value}}
I am attempting to create a select in my Angular app based on a classificationsList array from the component. As of now, the view initiates with the first value already "selected", but validation marks it as an invalid response.
If I select the dropdown and choose the other option, it returns valid.
(before selection)
(after selecting)
But when I go back to select "Class 1" it registers as invalid again.
What I'm expecting this to do is have the default, empty option (like below), that disappears once a real option is selected. The difference between these two lists is that the classificationsList is dynamic, whereas the the department list is static.
In fact, I took the html block from the department list and just added the *ngFor piece. Can someone tell me what I'm doing incorrectly, here? The issue isn't strictly with the validation, however. The bigger issue is the fact that it defaults to the first value in the array instead of an empty value like Department. When I put an empty string into the first item of the array from the component side, it selects the empty value like it selects "Class 1" as you've seen.
The validation actually performs fine here, as the empty string is invalid, and the rest of the array items are valid. In this scenario, though, there is an empty string still available in the option.
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList">{{class}}</option>
</select>
</div>
I got it! The functionality I was looking for required me to set a default value (unattached to the array). For this one, I set the default as null like below.
<div class="formBoxRows">
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
</select>
</div>
I am currently working with ionic 3. I have a select that accepts multiple entries.
However, at the lunching of the page i am checking for already existing selected value and pushing them into an array. finally i am assigning this array as[(ngModel)] to the select.
THE PROBLEM is that the selected item do not show unless i press on the select. if i do press then they show that some items were selected. how can i make them show from the beginning?
HTML Code:
<ion-select class="sel1" multiple [(ngModel)]="chosenindustries" [disabled]="editable">
<ion-option *ngFor="let indu of industries" [value]="indu.ID">{{indu.IndustryName}}</ion-option>
</ion-select>
knowing that industries is a preloaded array that contains objects that i populate the options based on
and i am defining the data array as follow
public chosenindustries: any = [3, 4, 8, 6 ,5];
please replace this code may it well work you forgot property multiple="true"
<ion-select class="sel1" multiple="true" [(ngModel)]="chosenindustries" [disabled]="editable">
<ion-option *ngFor="let indu of industries" [value]="indu.ID">{{indu.IndustryName}}</ion-option>
</ion-select>
if you want something display in starting you can use placeholder e.g
placeholder="Start Time"
You can try this solution.
I have create demo on stackblitz
<ion-select class="sel1" multiple="true" [(ngModel)]="chosenindustries" [disabled]="editable">
<ion-option *ngFor="let indu of industries" [value]="indu">{{indu.IndustryName}}</ion-option>
</ion-select>
<div>{{chosenindustries | json }}</div>
Im using Angular material's for multipe choice purpose like mentioned in their site https://material.angular.io/components/select/overview (8th example).
I also have an array of items (key and value) which are a part of the choices([key:1 value:extra cheese, key:2 value:onion])... I want them to be automatically selected (probably using formController) ... how can I do this?
plus, after the user selected/ unselectedsome options how do i get a new array back ?
thank you in advance!
you need to use ngModel
<mat-select placeholder="Toppings" [formControl]="toppings"
multiple [(ngModel)]='defaultValue'>
and define this defulatValue in your component like this, or programaticly as you wish
defaultValue = [this.toppingList[1], this.toppingList[3]]
and you can get this variable when anything changes, it will contain your selected values. Took this example from material example, all works fine for me.