I'm trying to populate a table dynamically with cells component.
input structure looks like:
tableData: {
headers: ['1', '3', '2', '4'],
rows: [
[{h: '1', t: 'Sample', v: {name: 'logan'}},
{h: '2', t: 'Sample', v: {name: 'dgd'}},
{h: '3', t: 'Sample', v: {name: 'logasdn'}},
{h: '4', t: 'Sample', v: {name: 'loezgan'}}]
],
showHeaders: ['1', '2', '3']
}
the html sections looks like that:
<!--table data-->
<tr v-for='(row,rowIndex) in tableData.rows'>
<td><input type='checkbox'></td>
<td v-for="(element,colIndex) in row">
<component is='Sample' v-bind='element.v' ></component>
</td >
</tr>
When I pass 'Sample' (the component name) as parameter it works, but its not when I replace 'Sample' by 'element.t' or {{element.t}} which I don't understand.
Does anyone knows why its not working and how to do that?
You need to bind to is via v-bind:is or the shorthand :is:
<component :is='element.t' v-bind='element.v'></component>
Related
html: -
<div class="form-group">
<label for="experience" class="form-label">I am experience</label>
<select class="custom-select" formControlName="experience" name="experience" onchange="change(this);">
<option *ngFor="let experience of experiences">{{experience}}</option>
</select>
</div>
ts:-
experiencesLessThanTenYears = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
experiencesMoreThanTenYears = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
experiences = [ ...this.experiencesLessThanTenYears, ...this.experiencesMoreThanTenYears];
ngOnInit(): void {
this.registrationForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.minLength(3)]],
startDate: [ '',[Validators.required]],
endDate: ['',[Validators.required]],
experience: ['',[Validators.required,]],
})
I want to show message on selecting values less than 10 and greater than 10 on my view. Please help me on how to do that.
I tried using the change event of my html select but it was not working. I was hoping to make a custom validator but I don't know was just an idea. Please someone help me out
{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.
But this makes that if you don't selected anything show that you have a poor experience.
We can use a ng-container *ngIf in the way
<ng-container *ngIf="registrationForm.get('experience').value">
{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>
Well, as we use a *ngIf, we can create a temporaly variable
<ng-container *ngIf="registrationForm.get('experience').value as experience">
{{+experience>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>
The another way is use a ternary operator inside a ternary operator. Really is an ugly (but equal effective solution)
{{registrationForm.get('experience').value?
+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience':
''}}
I am displaying data value as dropdown if below condition in html is met.
I would like to add another condition where on change of another dropdown which contains companies name I show data1value. For example if 1st dropdown (companies name) is changed toAmazonthen I only displaydata1` as its value
<dd>
<mat-select *ngIf="editMode"; else showData" [disabled]="!editMode"
[(ngModel)]="term.data" (ngModelChange)="recordModified.emit()">
<mat-option *ngFor="let tag of data" [value]="tag.value">{{tag.text}}</mat-option>
</mat-select>
<ng-template #showData>{{term.data}}</ng-template>
</dd>
data = [
{value: '1', text: 'Amazon'},
{value: '2', text: 'Google'},
{value: '3', text: 'Apple'},
data1 = [
{value: '1', text: 'Amazon'},
From what I can gather you want to access the data that has been selected by the dropdown, correct? You're close... check out this demo for a working version https://stackblitz.com/edit/angular-ivy-xmxqpg?file=src%2Fapp%2Fapp.component.ts
I am not able to get already selected item. In this code in rp which is an array of type Permission which has one element in it , So basically that value should be selected when I load this div. What will be the mistake?
This is My HTML:-
<div class="gapRowSmall displayFlex flexColumn mb-small" *ngIf="(permissions$ | async)! as permissions">
<div *ngFor="let permission of permissions" class="p-field-checkbox">
<p-checkbox [value]="permission" [(ngModel)]="rp" class=" mr-small"></p-checkbox>
<label>{{permission.name}}</label>
</div>
<div class="displayFlex flexJustifyEnd">
<p-button type="submit" label="Save" styleClass="primary" (onClick)="savePermissions()"
[appSubmitIndicator]="(isSubmitInProgress$ | async)!"></p-button>
</div>
</div>
This is My ts file:-
permissions$ = this.store.select(permissionSelector)
.pipe(takeUntil(this.permissionManagementSubject));
rp: Permission[] = [{ name: 'Create New Transitions', id: 'a45d7806-fbf8-4df7-8248-6f636288ff23' },];
The item in your rp array must completely match one of the items in your Observable permissions array. If not all the fields in the object match, then it will not be selected.
So if the permissions would be loaded in the constructor like this:
constructor() {
this.permissions$ = of([
{name: "aaaaa", id: '123456-789012'},
{name: "bbbbb", id: '223456-789012'},
{name: "ccccc", id: '323456-789012'}
])
}
and the selected permissions in rp would be :
rp: Permission[] = [
{ name: 'aaaaa', id: '123456-789012' },
{ name: 'bbbbb', id: '223456-' }, // This one is incomplete, thus no match
];
Then the second one, will not be selected although partially it is matching.
I've a working example of this in stackblitz. https://stackblitz.com/edit/primeng-checkbox-demo-9rhzru?file=src/app/app.component.ts
models.py:
class Person(models.Model):
GENDER_SELECT = (
('f', 'Female'),
('m', 'Male'),
('o', 'Other'),
)
TITLE_SELECT = (
('0', 'Mr.'),
('1', 'Mrs.'),
('2', 'Ms.'),
('3', 'Mast.'),
)
title=models.CharField(max_length=5,choices=TITLE_SELECT)
name=models.CharField(max_length=100)
gender=models.CharField(max_length=11,choices=GENDER_SELECT)
forms.py:
class PersonForm(ModelForm):
class Meta:
model=Person
fields='__all__'
widgets={
'title': forms.RadioSelect(),
'gender': forms.RadioSelect(),
}
template:
<form action="" method="post">
{% csrf_token %}
{{form1.as_p}}
<input type="submit" value="Submit">
</form>
Output:
As you can see, the fields display as verticals whereas I want them horizontal. Plus, I don't want that initial '__________' choice. How can I achieve it?
To replace the dashed lines you can use the empty label attribute in your model choice field, so for example :
forms.ChoiceField(empty_label="(Select here)")
Or set it to None or empty string if you don't want anything
As for the horizontal render you can provide your own renderer so something like that would work :
from django.utils.safestring import mark_safe
class HorizontalRadioRenderer(forms.RadioSelect.renderer):
def render(self):
return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))
forms.ChoiceField(choices=APPROVAL_CHOICES, empty_label="(Select here)",widget=forms.RadioSelect(renderer=HorizontalRadioRenderer))
or if you are using bootstrap :
forms.ChoiceField(choices=APPROVAL_CHOICES, empty_label="(Select here)", attrs={'class': 'form-check-inline'})
To remove the empty label (the dashed lines) in a ModelForm, configure the underlying model field so that the default value is None:
class Person(models.Model):
GENDER_SELECT = (
('f', 'Female'),
('m', 'Male'),
('o', 'Other'),
)
TITLE_SELECT = (
('0', 'Mr.'),
('1', 'Mrs.'),
('2', 'Ms.'),
('3', 'Mast.'),
)
title=models.CharField(max_length=5,choices=TITLE_SELECT, default=None)
name=models.CharField(max_length=100)
gender=models.CharField(max_length=11,choices=GENDER_SELECT, default=None)
Hat tip to https://stackoverflow.com/a/24868776/308204 (I had a hard time finding the answer too).
I am new to angular and I'm creating a dynamic/nested menu based from my data below. I include the codes that I started with. Any help is appreciated.
Below is my json data:
dataList = [
{List: 'List 1', Client: 'Client A', Program: 'Client A Program 1'},
{List: 'List 2', Client: 'Client A', Program: 'Client A Program 1'},
{List: 'List 3', Client: 'Client A', Program: 'Client A Program 2'},
{List: 'List 4', Client: 'Client A', Program: 'Client A Program 2'},
{List: 'List 5', Client: 'Client B', Program: 'Client B Program 1'},
{List: 'List 6', Client: 'Client B', Program: 'Client B Program 1'},
];
Here's what I've started so far:
<ng-container *ngFor="let item of dataList>
<div class="clientList">
<button mat-menu-item [routerLink]="['/home']" color="primary" (click)="menuClick()"><i class="fa object_group"
aria-hidden="true"></i> {{item.Client}}</button>
</div>
</ng-container>
I would like to have an angular material menu that looks like this:
https://imgur.com/a/WGpYRlK