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>
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
This maybe very simple and I have researched on here and elsewhere but I cannot seem to find a good answer to my query.
I am using Angular and have created a mat-menu-item with checkbox and name.
<section *ngFor="let group of groups;">
<div *ngIf="group?.length > 0">
<mat-menu-item (click)="$event.stopPropagation()">
<mat-checkbox checked = true
(click)="myMethod(group, **<aria-checked value>**)">
<p>{{group.name}}</p>
</mat-checkbox>
</mat-menu-item>
</div>
</section>
While I have tried using $event.checked to get the value of the mat-checkbox, it returns the same value for all the boxes. I found aria-checked is different for each section created and I would like to be able to use this value to pass it to myMethod.
Is this possible? If not, is there a way to show individual values on the created checkboxes in the ngFor?
I am trying to dynamically set FormControlNames for select lists in a Reactive form but instead of formControlName, I'm getting ng-reflect-name.
My html code is as follows and I set the formControlName and ID on my select lists to the same value just for confirmation:
<div *ngFor="let questionOption of questionOptions; let i = index">
<select [id]="questionOption['control']" [formControlName]="questionOption['control']">
<option *ngFor="let option of questionOption['options']"> {{ option }} </option>
</select>
</div>
And this image shows ng-reflect-name being output inplace of the expected formControlName:
What can I try to resolve this?
UPDATE:
I have also found that my select lists do not reflect my selected option.
All my options are visible when I click on my list, I select my desired option but the displayed option remains unchanged.
However, when the form is submitted my console output displays my selected option.
The following image shows 2 select lists on the right which I had selected different options and submitted the form.
The console output on the left show the selected and submitted values.
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
Question in short:
What is the best way to show comments in ionic2, especially when it has replies. I need to show replies based on their time.
++++++++++++++++++++++++++++++
Question in detail:
I have the below data with me in json format.
This is the list of comments. In this example 19 comments are there under items tag.
http://www.jsoneditoronline.org/?id=47b282c498505ed25869dc36f5f3bd58
Comments are already sorted based on Date published.
Now on the Item Id 10th there are two replies to this comment.
I am looking for a way to order this reply based on publishedAt time.
Below is my html:
Here videoComments = the json data specified above
I tried using angualr-pipes orderBy pipe but that did not work for me, is there any alternative way?
<ion-list>
<ion-item *ngFor="let comment of videoComments">
<!-- here i Print the details what is required , next if there are any reply i would like to show them-->
<div *ngIf="comment.snippet.totalReplyCount != 0">
<ion-list>
<ion-item *ngFor="let reply of comment.replies.comments | orderBy: 'publishedAt'">
<!-- Above orderBy pipe is not working , may be my syntax is wrong -->
<!-- I would like to show replies in ascending order of when it was submitted-->
<!-- Details of replies will be shown here -->
</ion-item>
</ion-list>
</div>
</ion-item>
</ion-list>
Angular doesn't provide orderBy pipe. See here.
So you have to write it by yourself. Maybe this post can help you: Angular 2. How to apply orderBy?