I'm trying to check if Number is defined in flex mxml. Both of the following does not work:
<Checkbox visible="{isNan(obj.number)}"/>
<Checkbox visible="{obj.number == null}"/>
How is this done correctly?
I found out that the function name is case sensitive: isNaN()!
Related
I'd like an input which has a 'highlight' class if value != defaultValue.
Due to the library I am using, I can't reliably use names or onChange events. (If needed, I can do it, but it'll be a pain to set up).
Currently it looks like:
<td><input type="number" className={(this.value !== this.defaultValue ? 'highlight' : '')} defaultValue={1}/></td>
I get an error when trying to use 'this.value' or 'this.defaultValue' because the context for 'this' refers to the page, not the element.
Is there an in-line way I can get this value for comparison?
As best as I could find, there's no way to do this.
The solution I came up with was,
<td><input id={table.ID.toString()} type="number" onChange={() => highlightElement(table.ID.toString()} defaultValue={table.defaultValue}/> </td>
And defined highlightElement() as:
function highlightElement(id:string){
const element = document.getElementById(id);
element.style.backgroundColor = "#FDFF47";
}
...There's probably a way I could also input the intended default value as a function parameter and get the current value of the input, compare the two, and if matched DON'T highlight it, else apply the style. But this suits what I currently need.
I am using PrimeNG's p-orderList. By default, the metaKeySelection attribute is true which implies that a metaKey(ctrl key) is needed to be pressed to select multiple items. I was rather looking for a way to completely disable selection of multiple items. I should be able to select ONLY ONE item in the ordered list.
There is no metaKey attribute available for p-orderList. Can anyone help me with this?
<p-orderList [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
<ng-template let-policy pTemplate="policy">
<span>{{policy}}</span>
</ng-template>
</p-orderList>
PS: onSelectionChange($event) is triggered every time you select items from the ordered list. $event.value contains the array of the items.
There is no easy flag for it but it can be achieved through calling a function that basically replaces the entire selection array with just the original selected row.
You will need a variable to store the previous value for comparison.
onSelectionChange(event) {
if (event.value.length === 1) {
this.tempValue = event.value[0];
}
else {
event.value = [this.tempValue];
}
}
Can also be simplified by passing event.value to the function
(onSelectionChange)="onSelectionChange($event.value)">
What about the metaKeySelection input property? (as shown here)
<p-orderList [metaKeySelection]="false" [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
<ng-template let-policy pTemplate="policy">
<span>{{policy}}</span>
</ng-template>
</p-orderList>
I have in my template something like this:
<span *ngIf="selectedSport.key === 'walking'"> steps </span>
<span *ngIf="selectedSport.key !== 'walking'"> km </span>
I found this spelling quite ugly, and two lines for this... Meh. So I tried to look for alternatives to this.
NgIfElse
<span *ngIf="selectedSport.key === 'walking'; else elseSpan"> steps </span>
<ng-template #elseSpan> km </ng-template>
I found this one better, however it may be tricky to use in case of multi-condition like *ngIf="A && B". And we still have two code lines in template...
get function
<span> {{getUnit(selectedSport.key)}} </span>
getUnit(sportKey: string): string {
return sportKey === 'walking' ? 'steps' : 'km';
}
This is quite better as template gets more readable. However I would like not to add a function in my component for this.
Do you know if Angular 2+ templates support ternary operators as in the getUnit function?
Do you have any better idea?
You can use Conditional (ternary) operator, inside of template like below example
<span> {{selectedSport.key === 'walking' ? 'steps' : 'km'}} </span>
It seems that you are trying to display unit of selected sport.
It is better to keep the logic in controller and populate it in model
object and view just display the model.
Diluting the logic in
view layer may not a better design and violates law of single
responsibility.
if you want multiple ternary operator you can use like that
<span >{{this.commentsType === itemType.All ? counter.allCounts : this.commentsType === itemType.Project ? counter.projectCount : this.commentsType === itemType.Customer ? counter.customerCommunication : 0}}</span>
It took me more than 2 hours to deeply understand the experience.
In the following snippet, return doesn't work as expected:
return
<VideoItem
key={video.etag}
changeVideo={changeVideo}
video={video} />;
For more clarification I wanted to have return and what should be returned in multiple lines.
But the line below neither works:
return
<VideoItem key={video.etag} changeVideo={changeVideo} video={video} />;
My mistake was that I had to do one of the following:
Write return and the rest in one single line:
return <VideoItem key={video.etag} changeVideo={changeVideo} video={video} />;
Wrap the returning result with parentheses:
return (
<VideoItem
key={video.etag}
changeVideo={changeVideo}
video={video} />);
Yes, the modern JS is THAT sensitive!
All your content should be wrapped inside a parent tag.
A typical return syntax looks like so:
return (
<div>
Everything you do should be here.......
</div>
);
Notice the parent <div></div>. You can change it to anything like <h1></h1>, <b></b>, etc.
I have a pretty straightforward question which google fails to give me the answer to :
I have an AdvancedDataGrid where i build the columns dynamically (variable number of columns) in ActionScript, and i want the dataTip to display the column headerText when the user hovers over a cell. Adobe's example dataTipFunction:
private function tipFunc(value:Object):String
{
if (value is AdvancedDataGridColumn)
return "Column Name";
// Use the 'name' property of the data provider element.
return "Name: " + value["name"];
}
But in this case the value is only an AdvancedDataGrid column if the user hovers over a column header? I want the dataTip to always show the headerText for that column. So if i have to use this function, then how do i get the column headerText for a cell?
And as i understand the dataTipField i can't really use it to statically equal column.headerText (dataTipField = headerText).
Anyone have any pointers on how i can achieve this? It seems like a really easy task, still i can't seem to find out how :)
You can use a different function per column, which could be anonymous:
<AdvancedDataGridColumn dataTipFunction="{function(value:Object):String{return 'Data Tip'}}" ... />