In loop
<li *ngFor="let item of verticalList;let i=index;">
<mat-checkbox [(ngModel)]="checked" name="i">Checked</mat-checkbox>
</li>
I want to give each checkbox a different checked value. How to do it?
I don't know what is verticalList type, but id you use a list of object you could do something like this:
verticalList = [
{
name: 'foo',
checked: false
},
{
name: 'foo1',
checked: false
},
{
name: 'foo2',
checked: false
}
]
<li *ngFor="let item of verticalList;let i=index;">
<mat-checkbox [(ngModel)]="item.checked" name="i">Checked {{ item.name }}</mat-checkbox>
</li>
Related
I have json format like that. How can I display hobbies without the word "all" in Angular/TypeScript?
{
"Name": "Mustermann1",
"Vorname": "Max1",
"maennlich": true,
"Hobbys": ["Reiten", "Golfen", "Lesen", "all"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
{
"Name": "Mustermann2",
"Vorname": "Max2",
"maennlich": true,
"Hobbys": ["Reiten", "Golfen", "Lesen"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
{
"Name": "Mustermann3",
"Vorname": "Max3",
"maennlich": true,
"Hobbys": ["Reiten", "Lesen", "all"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
You can do it with two *ngFor loops and one *ngIf in your HTML, given that you have the data coming from your component. It might not be the ideal way to do it.
You loop through each person and each hobby to show, and filter out any hobby that is 'all'.
<ng-container *ngIf="hobby !== 'all'">
{{ hobby }}
</ng-container>
A quick setup:
<ng-container *ngFor="let person of dataObject">
<ul>
<li>
<h3>Name: {{ person.Vorname }}</h3>
<ng-container *ngFor="let hobby of person.Hobbys">
<ng-container *ngIf="hobby !== 'all'">
{{ hobby }}
</ng-container>
</ng-container>
</li>
</ul>
</ng-container>
And a working StackBlitz to validate your needs.
data = data.map((val) => {
val.Hobbys = val.Hobbys.filter((x) => x !== 'all');
return val;
});
<ng-container *ngFor="let item of items">
<ng-container *ngIf="item.Hobbys.indexOf('all') < 0">
<ul>
<li>
{{ item.Name }}
</li>
</ul>
</ng-container>
</ng-container>
stackblitz code link
hope someone can help me I'm working on this since 2 days. I have the following Data in my component:
var types = [
{
**required**: true,
agreements: [
{ selected: true, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
{
required: false,
agreements: [
{ selected: false, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
];
I want to validate all the checkboxes (they have v-model on this selected attributes here!), to be checked, if the parent value required (see my data required!) is true. My Validations looks like this but I miss a last little bit of help to get this required value into my validator selected requiredIf function.
validations: {
types: {
$each: {
agreements: {
$each: {
selected: {
requiredIf: (value) => value === value.parent.required
}
}
}
}
}
}
Hope you understand me right. My Template looks like this:
<div class="mb-3" v-for="type in agreementTypes" :key="type.id">
<h3 class="text-primary">{{ type.displayName }}</h3>
<ul class="list-unstyled">
<li v-for="agreement in type.agreements" :key="agreement.id">
<p>{{ agreement.description }}</p>
<div class="mb-3 form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
:checked="agreement.active"
:id="agreement.id"
:required="agreement.required"
v-model="agreement.selected"
/>
<label class="form-check-label" for="agreements">{{ agreement.label }}<span v-if="agreement.required">**</span></label>
</div>
</li>
</ul>
</div>
Any Help will be apreshiated!
bye,
Marcel
I want to display data in chips using selectBox, but I got a problem while displaying these items like this:
My TS:
selectedPointsForts: any[]=[];
listPointsForts: any[]=[];
SelectPointsForts() {
this.PointsFortsService.findAll().then((res) => {
this.listPointsForts= res.map(function(obj: any) {
return {
value: {
id: obj.id,
name: obj.libelle
},
label: obj.libelle
};
});
});
}
My HTML:
<p-multiSelect [options]="listPointsForts" [(ngModel)]=" selectedPointsForts" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=2></p-multiSelect>
<p>Selected Cars: </p>
<p-chips [(ngModel)]=" selectedPointsForts" > </p-chips>
Can anyone help me to fix this problem !
You can place pTemplate in <p-chips> element to format the chip items' displayed output.
<p-chips [(ngModel)]="selectedPointsForts">
<ng-template let-item pTemplate="item">
{{ item.id }} - {{ item.name }}
</ng-template>
</p-chips>
Sample Solution on StackBlitz
Output
References
Chips (Custom Content)
I want to hide the other 3 elements in li element after the one of the list was clicked (the clicked list remain unhide), as I try it hide all the li element.
payment.component.ts
paymentLists = [
{
name: 'IpayEasy',
},
{
name: 'Credit Card',
},
{
name: 'Internet Banking',
},
{
name: '7-Eleven',
},
];
selectedIndex: number;
select(index:number) {
this.selectedIndex = index;
}
payment.component.html
<ul *ngIf="selectedIndex == paymentList">
<li (click)="select(paymentList)"
*ngFor="let paymentList of paymentLists; let i=index">
<span>{{paymentList.name}}</span>
</li>
</ul>
Here what have I tried,
demo
Before:
IpayEasy
Credit Card
Internet Banking
7-Eleven (clicked li)
After:
7-Eleven (li element remain unhide)
You need to update your template as following
Move ngFor to ng-container element
Update ngIf condition to be true only if there is no selected index or the matching selected index
Pass index in select function
Updated html will be as follows
<ul>
<ng-container *ngFor="let paymentList of paymentLists; let i=index" >
<li (click)="select(i)" *ngIf="selectedIndex === undefined || selectedIndex == i" [ngClass]="{'tab__list--selected--mobile': selectedIndex == paymentList}">
<span>{{paymentList.name}}</span>
</li>
</ng-container>
</ul>
For reference, here is the working version
try
<ul *ngIf="selectedIndex == paymentList">
<ng-container *ngFor="let paymentList of paymentLists; let i=index">
<li (click)="select(paymentList)" *ngIf="!selectedIndex || selectedIndex=i">
<span>{{paymentList.name}}</span>
</li>
</ng-container>
</ul>
you can use this code instead of yours :
your ts:
select(index) {
this.paymentLists = [index];
}
your HTML:
<ul *ngIf="selectedIndex == paymentList">
<li (click)="select(paymentList)"
*ngFor="let paymentList of paymentLists; let i=index">
<span>{{paymentList.name}}</span>
</li>
</ul>
Just for the record, Since my previous answer wasn't very clear. Here is a thorough explanation to the solution for the aforementioned problem.
paymentLists = [
{
name: 'IpayEasy',
},
{
name: 'Credit Card',
},
{
name: 'Internet Banking',
},
{
name: '7-Eleven',
},
];
selectedIndex: number;
select(index:number) {
this.selectedIndex = this.paymentLists.findIndex(x => x.name==paymentListNameObject.name);
this.paymentListSelected = true;
}
in the above mentioned code, the select function recieves an object instead of the index number. which can be corrected as above. Also i added a variable paymentListSelected. this variable tracks if a particular payment method has been selected.
In the HTML, you could get rid of *ngIf="selectedIndex == paymentList" and use the following:
<ul>
<li *ngFor="let paymentList of paymentLists; let i=index" (click)="select(paymentList)"
[ngClass]="{'tab__list--selected--mobile': ((i == selectedIndex)&&paymentListSelected),'hide-tab__list--unselected--mobile': paymentListSelected}">
<span>{{paymentList.name}}</span>
</li>
</ul>
Here i add 2 classes tab__list--selected--mobile which is applied to the selected payment method based on the index number which was selected by the user. And to hide the other options, i added hide-tab__list--unselected--mobile to all other options.
Finally here is a working link just in case the explanation wasn't clear enough.
https://stackblitz.com/edit/angular-display-list-d19ffv
This answer i guess qualifies for not getting DELETED!!!!!
I have this dynamic list created with ngFor. When I click on item I want to expand it with new dynamic list, but only for that item. In my following code it expends for every item in the first list. I understand why that is happening, but I don't have ideas how to solve it.
Here is my code
<ul *ngFor="let p of portList">
<li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li>
<ol *ngFor="let onu of portONUList">
<li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li>
</ol>
</ul>
Any ideas how to solve this would be very helpful.
From what I understand, the subarray is the same which is shown for all your items, so there is no relation between the nested array and the outer array.
My suggestion would actually be to add a new property in your array, e.g expanded... so e.g your outer array would look like:
portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];
And then your HTML:
<ul *ngFor="let p of portList">
<li (click)="expand(p)">{{ p.name}}</li>
<div *ngIf="p.expanded">
<ol *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ol>
</div>
</ul>
And on click, toggle the expanded property:
expand(p: any) {
p.expanded = !p.expanded;
}
Of course if you want to have a "quick" solution you could rely on HTML5 with no need of the new property:
<details *ngFor="let p of portList">
<summary>{{p.name}}</summary>
<ul *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ul>
</details>
Here's a plunker with both options.
There should be a relation between parent and childlist and the list should be in json format. Refer below code
<ul>
<li ng-repeat="item in parent" ng-click="showChilds(item)">
<span>{{item.name}}</span>
<ul>
<li ng-repeat="subItem in item.subItems" ng-show="item.active">
<span>{{subItem.name}}</span>
</li>
</ul>
</li>
</ul>
Sample JSON FORMAT
let parent= [
{
name: "Item1",
subItems: [
{name: "SubItem1"},
{name: "SubItem2"}
]
},
{
name: "Item2",
subItems: [
{name: "SubItem3"},
{name: "SubItem4"},
{name: "SubItem5"}
]
},
{
name: "Item3",
subItems: [
{name: "SubItem6"}
]
}
];