I need to show data in select with two lines each. I am using ng-select.
<ng-select [(ngModel)]="selectedData" placeholder="Select Data">
<div *ngFor="let data of Data">
<ng-option [value]="data.id">
{{data.name}} - {{data.price | currency}}
{{data.description}} - {{data.code}}
</ng-option>
</div>
</ng-select>
I am using ng-select and trying to show the data in ng-option, it is showing the data in one line. already tried br and /n.
Thanks in advance.
No, you can't!
None browser will allow doing this formatting of text.
But yes you can use some another alternate for show text if needed may be using title which will show data as a tooltip.
This is not supported.
Try this instead,
Data.forEach(element => {
dropDownDataSource.push(id: element.name, value: element.name)
dropDownDataSource.push(id: element.description, value: element.description)
});
<ng-select [(ngModel)]="selectedData" placeholder="Select Data">
<option *ngFor="let data of dropDownDataSource" value="{{data.value}}">
{{data.id}}
</option>
</ng-select>
Related
<div *ngFor="let cus of deselectedList | keyvalue"
(click)="clickCheckBox('customer_'+cus.key+'_checkbox')">
{{cus.key}}
<mat-checkbox id="customer_{{cus.key}}_checkbox"
(change)="deselectCheck($event.checked, cus.key, cus.value)">
</mat-checkbox>
</div>
deselectedList is a map. As I have a map and am iterating through it there is no way to use [checked]. I would like to send a (change) event to the mat-checkbox based on the elements ID.
I also worry a change event will not change the visual on the checkbox itself. I was trying something like this with no success:
let box = <HTMLInputElement>document.getElementById(customer);
box.dispatchEvent(new Event("change"));
Is it possible to update the box enabled/disabled status and trigger the (change) event?
Got it:
<div id="customer_{{cus}}"
*ngFor="let cus of deselectedList | keyvalue"
(click)="checkbox.toggle(); deselectCheck(checkbox.checked, cus.key, cus.value)">
{{cus.key}}
<mat-checkbox id="customer_{{cus.key}}_checkbox" class="cus-check float-checkbox-right"
#checkbox>
</mat-checkbox>
</div>
And also add "pointer-events:none" to the css of the check box -> cus-check
I would like to know how I can convert text data into individual boxes as shown in the picture each time user enters a word separated after a comma (I am currently creating this as an input field on Angular)
You can simply use a variable with ngModel and a *ngFor over this variable.split(',')
<input [(ngModel)]="name">
<ng-container *ngIf="name">
<div *ngFor="let item of name.split(',')">
{{item}}
</div>
</ng-container>
NOTE: You can use mat-chip-list in the way
<mat-chip-list *ngIf="name">
<mat-chip
*ngFor="let item of name.split(',');let i=index">
{{ item }}
<button matChipRemove>
<mat-icon (click)="remove(i)">cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
where
remove(index:number)
{
const list=this.name.split(",") //get the list
list.splice(index,1) //remove the element at position "index"
this.name=list.length?list.join(','):null //give value to name using join
}
stackblitz
NOTE: If you only need the "list" based in a variable just give value to the variable
Looks like you are looking for something like Angular Material Chips.
https://material.angular.io/components/chips/examples
I display 51 questions with their related answers on a page.
Both information come from one web-service call.
<tbody>
<tr *ngFor="let QuestionOption of questions; trackBy: trackQuestionById; let i = index;">
<th scope="row">{{QuestionOption.id}}</th>
<td>{{QuestionOption.name}} {{QuestionOption.description}}
</p>
<select class="form-control" name="selectAnswer" [(ngModel)]="answer[i]">
<option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
</p>
</td>
</tr>
</tbody>
on the typescript code I try the following:
answer: Answer[];
this.answer = new Array<Answer>();
The type Answer has multiple fields like: Id, Name, Score, Description
What is not working is that I always have get the Id into the answer[i]
but I want to have the id in the field answer[i].id
If i change the
[(ngModel)]="answer[i]"
into
[(ngModel)]="answer[i].id"
I get the following exception:
ERROR TypeError: "_co.caaAnswer[_v.context.index] is undefined"
I also tried:
[(ngModel)]="answer[i]?.id"
So is it correct to use answer[i] ? and then in the option I should somehow assign to answer[i].id the selected value. If so somebody can help how to do it.
Any help is appreciated! Thanks a lot.
augeres
I found the solution. The problem was that the compareWith function did not work properly because of the Array. It only works in case you name the html select based upon the array index:
Working version:
<select class="form-control" id="field_answer{{i}}" name="field_answer{{i}}" [(ngModel)]="resultAnswer[i].answer" [compareWith]="compareFn">
<option [ngValue]="answer" *ngFor="let answer of Question.answers; trackBy: trackAnswerById">{{answer.id}} {{answer.description}}</option>
</select>
You have to push into answer on select change like this
<select class="form-control" name="selectAnswer" [(ngModel)]="selectedAnswerId" (change)="setAnswer(i)">
<option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
<select>
in component.ts
selectedAnswerId : number;
setAnswer(index){
this.answer[index].push({id : this.selectedAnswerId})
}
I have an issue with the ngIf in Angular. So basically I want to implement a notification system to notify the user of what fields are missing.
Here is a stackblitz for the issue: https://stackblitz.com/edit/angular-behnqj
To reproduce:
1. first select the vehicle type 'plane', here everything is correct, the first error is removed and the second remains with index = 1.
2. Now refresh the stackblitz preview webpage and this time select the vehicle type 'car', we can now see that the first error is removed but the second remains with index = 2.
With some debugging I figgured out if I swap between conditions in the ngIf and do something like
<ng-container *ngIf="selectedVehicleType === 'plane'; else carsOptions">
<option *ngFor="let plane of planes; let i=index" [value]="plane" [selected]="plane === selectedVehicle" [hidden]="i===0"> {{plane}}</option>
</ng-container>
</select>
<ng-template #carsOptions>
<option *ngFor="let car of cars; let i=index" [value]="car" [selected]="car === selectedVehicle" [hidden]="i===0" > {{car}}</option>
</ng-template>
This will result to the same issue but this time with the issue occuring when we select 'plane' and not 'car'.
change it to this it will work :)
<div class="content">
<span>errors:</span>
<ul style="list-style: none;">
<li *ngFor="let error of errors; let i=index;"> {{(i+1)+ ". "+error}}</li>
</ul>
</div>
hope it helps.
I'm currently attempting to switch the tabbing inside of an MD-Gridlist to tab hoizontally rather than vertically. I have tried using tab indexes and had no luck. I want to be able to tab through this dynamically growing or shrinking grid list horizontally.
<ng-container *ngFor="let field of fieldsTable; let i = index">
<!--condition in the grid-list tag checks if the key filed can be shown -->
<md-grid-list class="static-column" cols="1" rowHeight="25px" *ngIf="field.$type == GlobalVariables.typeClasses.Static && (field.Name !== '' || showKey)">
<md-grid-tile class="field-name-tile theme-primary" *ngIf="!field.IsKey;">
{{field.Name}}
</md-grid-tile>
<md-grid-tile class="field-name-tile theme-primary" *ngIf="field.IsKey && showKey" mdTooltip="Key field used to update data for this row via the api, values must be unique.">
<md-icon>vpn_key</md-icon>
</md-grid-tile>
<md-grid-tile class="static-field-tile theme-accent-alternating " *ngFor="let content of field.ContentData; let i = index">
<md-input-container class="content-data-input">
<input class="field-input" mdInput (keyup)="content.Value=$event.target.value" value="{{content.Value}}">
</md-input-container>
</md-grid-tile>
</md-grid-list>
</ng-container>
Any help would be greatly appreciated because I've hit a roadblock.
Thank you in advance!
I managed to remedy this by:
Adding this to the input container html which live in the grid tiles of the grid list
tabindex={{setTabIndex(i,j)}}
and this in the TypeScript
setTabIndex(outerIndex: number, innerIndex: number): number {
return (outerIndex + 1) + (innerIndex * this.staticTableLength);
}