I want to bind id to Angular material checkbox.
I have an object item.
When I inspect html I have item.id + '-input'
But when I bind name it's okay: item.id
This is my code:
<mat-checkbox [id]="item.id"[name]="item.id">
i havent worked with Material yet but in native angular you can assign IDs via a component by [id]="{{item.id}}".
If your using an obejct array[] of items, you can also try iterating through your array to create Mutliple entrys like so.
<div class="subbox text-center"
*ngFor="let i of item">
<mat-checkbox [id]="{{i.id}}" [name]="{{i.name}}">
</div>
Related
I am trying to add a new icon and possibly a href on the mat-chip component but I want it as properties and not to hardcode into that.
So the idea is to have it as a component so I can call it from another component and give data.
For example links, and icons are on the left side and right sides.
Icons on left should be an edit icon and the right will be default remove.
But at the hovering, both of them need to be highlighted.
So let's say if from another component we define the left icon then it will be shown and if not then will be not shown.
Or can it be done within a directive too?
I have till now created like this but I think I need more to do on that.
See stackblitz.
Maybe instead of ngIf is any other way to use it.
But I want for example that in the child component to send the index so then I can use it into href.
But in the child, I cannot use the index so I can iterate through the components and use the href for each of them and I want to use this component for different data.
see components in stack blitz.
users and group components.
1 of them has a variable name and the other one has a username.
https://stackblitz.com/edit/angular-3vp4xw-a9jeot?file=src/app/chips-autocomplete-example.ts
What about somethin like that :
You create a component like 'mat-chip-link':
<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
<ng-content select="[.beforeLink]"></ng-content>
<a
[href]="link"
class="mat-standard-chip"
target="_blank"
style="margin: 0; padding: 0"
>My link</a
>
<ng-content select="[.afterLink]"></ng-content>
</mat-chip>
(I am not sure about the ng-content selector, check the doc here for more info. https://angular.io/guide/content-projection).
Which has an input like #Input link: string;
Then from the parent you can call this component like that
<mat-chip-link *ngFor="let fruit of fruits" (removed)="remove(fruit)" [link]="test">
<mat-icon matChipRemove class="beforeLink" *ngIf="editable">cancel</mat-icon>
<mat-icon matChipRemove class="afterLink" *ngIf="removable">cancel</mat-icon>
</mat-chip>
It might be done easier, for example (Typescript):
Template of custom component mat-chip-link
<mat-chip-link (click)="this.clickEventHandler($event)"/>
<mat-chip>
<ng-content>
</ng-content>
</mat-chip>
</mat-chip-link>
Component
private _href: string | null = null;
#Input('href') public set href(value: string | null) {
this._href = value;
}
public clickEventHandler(e: MouseEvent) {
if(this._href !== null) {
window.open(this._href, '_blank');
} else {
console.log('No href specifief');
}
}
Usage
<mat-chip-link [href]="https://www.stackoverflow.com">
Jump to StackOverflow 🙌🏼
</mat-chip-link>
I am using PrimeNG p-table with a header row that has both input and p-dropdown filters and need to clear the filter values of the input and p-dropdown when calling the .reset() method on the table.
As other's have pointed out (https://stackoverflow.com/a/51402834/5764320), you can use [value] on input elements, but there doesn't seem to be a way to clear any non-input filter values.
How can I reset the filters values for the p-dropdown (and other non-input filter types)?
I figured out a simple, clean way that you can use ng-template to accomplish this.
Put your <tr> that has your filters into an ng-template
Add the ng-template to your HTML twice using [ngTemplateOutlet] and *ngIf and assign a value that gets toggled so that one template is used for true and the other for false.
Toggle the value assigned to the templates when you clear your filters.
This "clears" the filters since Angular completely adds and removes the HTML of the templates from the DOM when they are toggled, which means that any values that had previously been used won't exist anymore.
HTML
This assumes you are using <p-table #dt ...> so that dt can be passed with your button click.
Note: leaving some of the p-table related parts and properties out to keep it clean.
<ng-template [ngTemplateOutlet]="FilterRow" *ngIf="showFilters"></ng-template>
<ng-template [ngTemplateOutlet]="FilterRow" *ngIf="!showFilters"></ng-template>
<!-- Whatever your 'tr' content is goes inside this template, this is an abbreviated example -->
<ng-template #FilterRow>
<tr>
<th class="text-center">
<button (click)="clearFilters(dt)">Reset</button>
</th>
<th>
<p-dropdown (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
</th>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')"/>
</th>
</tr>
</ng-template>
TypeScript
...
showFilters = true;
...
clearFilters(dt) {
this.showFilters = !this.showFilters; // toggle the ng-templates
dt.reset(); // reset the table
}
I just manually clear them by referencing the in the ts component.
Template
<p-dropdown #myDropDown (onChange)="dt.filter($event.value, col.field, 'equals')">
</p-dropdown>
TypeScript
...
#ViewChild("myTable", {static: false}) myTable: Table
#ViewChild("myDropDown", {static: false}) myDropDown: Dropdown
onResetTable() {
this.myTable.clear()
this.myDropDown.clear(null);
}
...
I have about 1000 Ui components to render, Which includes ion-range,ion-select with JSON data.
I am assigning my JSON Object array to the variable and rendering the components in HTML with *ngFor.
For e.g. :
In .ts :
let jsonArray=this.jsonData;
In .HTML :
<div *ngFor="let array of jsonArray">
// MY COMPONENTS
</div>
Now, I am getting data in variable ion less than 1ms. But my components taking so much time to render and it feels like screen is freezed.
Issue 1 : Can we reduce this rendering time by using anything other than this approach?
Issue 2 : Can we Add spinner or loading until its completes its rendering?
PS.: I am mentioning here that I have no issues with getting my data as it is from local sqliteDB. My Ui is getting stucked only while rendering the 1000 components.
UPDATE of .ts file
onSelect(dbId) {
this.dbService.getData(dbId).then(data => {
this.toDisplayArray=data.set;
})
}
Update of .HTML file
<ion-select interface='popover' (ionChange)='onSelect($event.detail.value)'>
<ion-select-option *ngFor="let set of deviceList; let i of index" value="{{set.Id}}">
{{set.name}}</ion-select-option>
</ion-select>
<div *ngFor="let set of toDisplayArray;let i = index">
<div *ngIf="set.type==="range">
<range [id]="set.id" [title]="set.title"></range>
</div>
<div *ngIf="set.type==="select">
<select[id]="set.id" [title]="set.title"></select>
</div>
<div *ngIf="set.type==="both">
<range-select [id]="set.id" [title]="set.title"></range-select>
</div>
</div>
so range,select and range-select are selector of my child components where I am passing the data through input and output.
I am working with ngx-chips and below code is to populate suggestion tag-input field.
<div *ngFor="let field of fields; let i=index">
<label class="pt-3 font-600">{{field.label}} {{field.id}}</label>
<tag-input
[identifyBy]="'id'"
[inputClass]="riProSuggestionField"
[displayBy]="'name'"
(onFocus)="onFocusInput($event)"
[placeholder]="field.placeholder"
[(ngModel)]="field.data"
[inputId]="field.id"
[onlyFromAutocomplete]="true"
name="{{field.label}}"
>
<tag-input-dropdown
[autocompleteObservable]="getSuggestions"
</tag-input-dropdown>
</tag-input>
</div>
In above code I have multiple fields and I am populating it by doing ngFor , While doing this I am trying different name to each tag-input as I have to fetch different fields data to each individual input tag. Having only one autoCompleteObservable function called getSuggestions which will work accordingly to which field have focused right now.
My .ts code is to get Which input have clicked is
onFocusInput(data) {
const focusedElement = document.getElementsByClassName('ng2-tag-input--focused');
console.log('Focused element', focusedElement);
}
I wanted to get the name of focused <tag-input></tag-input> so that I could getSuggestions according to this name.
I have a set of icons that are displayed using ngFor like this:
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
<mat-icon id="iconBar"> {{category.icon}} </mat-icon>
</mat-chip>
and I am trying to change the color of one specific icon on a button press, my trial is to have this function executes when the button is pressed:
recolorRequired(){
var loopedIcon = document.getElementById("iconBar");
console.log(loopedIcon.textContent);
var requiredIcon = loopedIcon.textContent;
//recolor
}
The result of console.log(loopedIcon.textContent); is the first icon only, from my understanding that because I am using same id for multiple elements? is there a way I can obtain information about the whole icon collection from ngFor?
Yea it is because you are using an id in a loop, id is usually not meant to be used on multiple items, you can use a class instead.
<mat-chip *ngFor="let category of categories" (click)="selected(category)" [selected]="category.selected" [matTooltip]="category.name">
<mat-icon class="iconBar"> {{category.icon}} </mat-icon>
</mat-chip>
your function becomes
recolorRequired(){
var iconBars = document.getElementsByClassName("iconBar");
//iconBars will be an array of elements who has iconBar as class
//loop through iconBars and find the element you want
//recolor
}