We have created a component using Angular material's autocomplete. To display the options, we are traversing through an array of 51 objects. I am applying a CSS class to the already selected option. The isAccountingTypeSelected method determines whether the option was selected or not.
The method gets called 51*28 = 1428 times. I don't seem to understand the reason? It should only be called 51 times, shouldn't it?
<mat-form-field class="full-width">
<input type="text" matInput #autoCompleteInput [formControl]="autocompleteForm" [matAutocomplete]="auto" placeholder="Choose Accounting Type" aria-label="Number">
<span matSuffix class="close-icon hover" *ngIf="autoCompleteInput.value" (click)="clearAll($event)"></span>
<span matSuffix class="arrow-drop-down-icon hover" (click)="openPanel()"></span>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="accountingTypeSelected($event)">
<mat-option *ngFor="let accountingType of filteredAccountingTypes | async" [value]="accountingType.code">
<span class="accounting-type-options" [class.selected]="isAccountingTypeSelected(accountingType.code)">
{{ accountingType.name + ' (' + accountingType.code + ')' }}
</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
isAccountingTypeSelected(code: string): boolean {
console.log('I was called');
if (this.selectedAccountingTypes.find((accountingType: AccountingType) => accountingType.code === code)) {
return true;
}
return false;
}
Angular uses changedetection lifecycle multiple times to check if the function has changed for [class.selected] or ngClass. If you use function, it will call multiple times. For this reason the use of function is not advised when you bind, instead you should calculate the values in your component.ts file and just bind the values to ngClass or [class].
Example: Stackblitz
N.B: We know when we change selected value it triggers a event change, we can calculate it and attach the calculation result to the [class.my-class] or ngClass.
Angular is gonna evaluate that expression every time it checks for changes, which in your case might be the css being added to your span elements.
Calling methods from the template in a for loop is not the best approach because they are called very often. You should instead store the result in a property and bind to this property instead.
It is a bind problem. Angular checks more times the result value. You can try with ChangeDetectionStrategy.CheckOnce
Your ngFor loop needs track a specific id so it won't re-render for nothing. Try this:
<mat-option *ngFor="let accountingType of filteredAccountingTypes | async; trackBy: trackByCode"[value]="accountingType.code">
</mat-option>
Then you add this function:
trackByCode(index: number, accountingType: yourType): string {
return accountingType.code;
}
Related
So I am using ng-bootstraps datepicker to display some user data for each day. I use custom day template to apply certain CSS classes
<ng-template #customDay let-date>
<div
class="custom-day"
[ngClass]="evaluatePresenceType(date)"
>
{{ date.day }}
</div>
</ng-template>
The thing is this method is being called many times for each day which is less than optimal.
Is there a way to apply CSS class to every day just once, when the datepicker is being rendered and not every time I click anywhere?
When you want to use a custom template day to give some class to "specials days" you has two approach:
Use [ngClass] or [class.myClass]="function(date)" as you
indicate
Use DayTemplateData (see the docs)
Well, the doc is not very clear. The idea is to have a function,e.g.
data=(date: NgbDate, current?: {year: number, month: number})=>
{
//see that futhermore the "date" you has an object
//current with two properties: "year" and "month" that is showing
return this.calendar.getWeekday(date)>=6?'square':null
}
Then you use
<input class="form-control" [dayTemplateData]="data"
[dayTemplate]="customDay" ...>
And your template day pass the "data" using let-data=data
<ng-template #customDay let-date let-data="data" ...>
<span class="custom-day" [ngClass]="data" ...>
{{ date.day }}
</span>
</ng-template>
See that if you only want to apply an unique class your function can return true or null and use [class.myClass]="data"
In the stackblitz, I use the two approach and use two counters to show the improve of this another approach
I am working on an angular application and I am using mat form fields in it. For changing color of botttom border of mat form field I am using mat-form-field-ripple css which is inbuilt for mat form field. CSS is as follows.
.mat-form-field-ripple {
background-color: #f9c940!important;
}
When I use this CSS, it automatically gets applied to all form fields. I have to apply #f9c940 color in mat-form-filed-ripple in when one condition is true and a different color when another condition is true. My mat form field code is as follows:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
I was trying to do it using ngClass as shown above but not getting it. How can I do that?
ngClass doesn't work with <mat-form-field>. Use this syntax-
<mat-form-field [class.mat-form-field-invalid]="booleanVariable">
and in the .ts file, you can conditionally update the booleanVariable
You can apply classes conditionally like this:
<mat-label [ngClass]="{'your-class': foo=='foo', 'your-class-another':bar=='bar' }">
Name
</mat-label>
Just create your own CSS class:
.mat-form-field-ripple {
//your standard styling,
}
.myBackgroundColor {
background-color: #f9c940!important;
// add this selector below the .mat-form-field-ripple selector so that it will override..
}
Then apply it conditionally to your label:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{'myBackgroundColor': mycheck}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
In your component you have the expression it is based on:
mycheck = true; // you will modify this true to any expression that is transformable to a boolean. If true, your class is applied, if false then not..
I have the following below code in my Html file :
Product.html
<mat-select id="selectProduct"
placeholder="Product"
multiple
[(ngModel)]="request.selectedProductIds"
#productModel="ngModel"
disableOptionCentering
(openedChange)="openedChange($event,'productFilterText')"
panelClass="contnetPanel"
#demo>
<input id="txtFilterProduct"
[(ngModel)]="productFilterText"
class="mat-select-filterbox"
placeholder="Search Product"
autocomplete="off"
(keyup)="filterProducts($event.target.value)" />
<div class="matOptionList">
<mat-option #matOption
*ngFor="let pfoduct of masterData.product"
[value]="product.id"
(click)="onproductClick(matOption,product)">{{product.name}}</mat-option>
</div>
</mat-select>
I want to write Unit test case in Angular for input element inside mat-select element in .ts file like below:
it('open the product dropDown', async(() => {
componentFixture.detectChanges();
spyOn(searchComponent, 'filterProducts');
let input = componentFixture.debugElement.query(By.css('#txtFilterProduct'));
input.triggerEventHandler('keyup', null);
componentFixture.detectChanges();
expect(searchComponent.filterProducts).toHaveBeenCalled();
expect(searchComponent.filterProducts).toHaveBeenCalledTimes(1);
}));
I am getting the error: calling triggerEventHandler on undefined.
Similarly it is giving the same error for mat-option.
Please suggest or tell how we can do unit test for input and mat-option inside mat-select for dropdown
I would like to get a typed value from a ReactStrap Input component, via the onChange function.
The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>
You can see the expected type is defined by the valueAs attribute.
I expect to get an event in this.onChange with:
a value as a String for Input 1
a value as a Number for Input 2
What is the best way to do this with React / Reactstrap?
Input component of reactstrap does not have a property called valueAs. To get value in a format you need, you can do:
<Input name="input1" type="text" onChange={(e) => this.onChange(`${e.target.value}`)}/>
{/* to make it integer you can add unary plus sign like so: */}
{/* this.onChange(+e.target.value) */}
I'm curious if I can somehow use dynamic variable names in templates. For example, I'm having a loop, though a type of units in my game:
{{# config.units:unit }}
<input type="text" id="unit_{{unit}}" class="toTrain selectable" value="" placeholder="0" />
{{/ config }}
Where the value of the input should return the value of {{units_1}} for example, which represents the amount of units (type 1).
I could easily do some external object and store the amount of units for each of them but, I was wondering if I can keep the data binded because somewhere in the template there will be a total needed resources which is calculated whith these values.
The only "solution" which came into my head was to get rid of the loop and manually write the units in the template. But, when units change, I also need to change the template, and.. the real template structure for one unit is a bit bigger than this snippet.
Example:
<input value="{{units_1}}" />
<input value="{{units_2}}" />
And I was looking for something like:
<input value="{{'units_'+unit}}" />
Which is obviously not working and not even supposed to work this way. But, thats why I'm here right ? To raise questions.
Regards !
Try to use write getUnit function:
{{# config.units:unit }}
<input type="text" id="{{ getUnit(unit) }}" class="toTrain selectable" value="" placeholder="0" />
{{/ config }}
Component:
Ractive.extend({
init:function(){
self.set("getUnit", function (id) {
return self.get("config.units.unit_"+id);
});
}
})