I am using [ngClass] to choose css class based on material table row value. On mouse over event I am changing flag value which fetching cssclass and which is working fine. But when I am debugging it I realize that it creates background thread and chrome continuously checking getIconCssClass in background which might create performance issue. How to resolve it?
HTML
<mat-icon [ngClass]="getIconCssClass(element)" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>
.ts
getIconCssClass(element: Object){
if(element.void && !element.mouseOver){
return 'void-icon-normal-css';
} else if(element.v)
return 'void-icon-mouseover-css';
}
mouseOverCss(element)
{
element.mouseOver = true;
}
mouseOutCss(element)
{
element.mouseOver = false;
}
I just remove method from [ngClass] and added property in object element. Default cssClass added based on condition before rendering mat table.
HTML
<mat-icon [ngClass]="element.cssClass" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>
Just changing cssclass on mouse over and out event instead of changing any flag.
.TS
mouseOverCss(element)
{
element.cssClass= 'void-icon-mouseover-css';
}
mouseOutCss(element)
{
element.mouseOver = 'void-icon-normal-css';
}
After some work around I found that when we use any flag in condition of [ngClass] method than angular create background process to continuous checking to method. we should always avoid boolean flag like mouseOver which is being changed in mouseOverCss method or avoid method itself to improve performance.
Related
I am creating a custom RowFactory for my TableView to accept drag-and-drop files. I want to update the style of the specific Row when an acceptable DragOver event is detected.
Using :hover obviously won't work because that would apply even if the user is not dragging anything.
The end goal is simply to make it visually clear which row the user is about to drop the items onto.
Is there a selector I can use in my stylesheet to handle this? I could not find anything in the JavaFX CSS Reference Guide.
I can currently work around this by defining my own StyleClass and adding it in the setOnDragOver() method:
setOnDragOver(event -> {
// Determine if the dragged items are files
if (!this.isEmpty() && event.getDragboard().hasFiles()) {
event.acceptTransferModes(TransferMode.LINK);
this.getStyleClass().add("dragging");
}
});
However, attempting to remove the class when exiting does not seem to work:
setOnDragExited(event -> this.getStyleClass().remove("dragging"));
Edit: I should also clarify that each row may have other styles applied to them (based on several factors) and would want to ADD a style to the row when being dragged over, not replace all the rest)
As mentioned by #kleopatra, working with custom PseudoClass can work for you.
/**
* Interface to keep all custom pseudo classes.
*/
public interface Styles{
/** Dragged pseudo class. */
public static final PseudoClass DRAGGED_PSEUDOCLASS = PseudoClass.getPseudoClass("dragged");
}
In your code:
setOnDragOver(event -> {
if (!this.isEmpty() && event.getDragboard().hasFiles()) {
event.acceptTransferModes(TransferMode.LINK);
this.pseudoClassStateChanged(Styles.DRAGGED_PSEUDOCLASS,true);
}
});
setOnDragExited(event -> this.pseudoClassStateChanged(Styles.DRAGGED_PSEUDOCLASS,false));
In CSS:
.table-row-cell:dragged{
-fx-background-color:$custom-color;
}
How can I set the background colour for an item within an if statement in typescript? I used querySelector but the answer can use anything to achieve the result.
The selector is (.mat-step:nth-child(2) .mat-step-header .mat-step-icon-selected).
Here is the code in a stackblitz.
I would appreciate any help!
The stackblitz example can be helpful but there is a lot in there to summarise what you are askign for, this answer is a generic way of doing so, meaning you can apply it to your code as and where you see fit.
Declare you boolean.
public value = true;
Now declare the CSS class you would like to use.
.exmaple-class {
background: red;
}
Then on the selected HTML element you want to apply the class.
<div [class.example-class]="value === true"></div>
or just
<div [class.example-class]="value"></div>
As this still equates to true. If value were set to false then the class would not be applied.
If you want to start building more classes and options for a specific element you can look into Angular's ngStyle.
Add in this, think this is what you are also asking for, little different. It only runs after the view is loaded, not working in you example because the HTML has not yet been drawn.
public ngAfterViewInit(): void
{
this.changeColour();
}
public changeColour() {
document.querySelector<HTMLInputElement>(".mat-step-icon-selected").style.backgroundColor = 'red';
}
}
Then add a click event to ensure that each time you select something the selector is updated.
<div class="center-contrainer" (click)=changeColour()>
I am trying to add CSS when clicked on row or column of table, Following is code
private rowClicked(event: Event): void {
event.srcElement.setAttribute("class", "highlighted");
}
But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?
Note-
Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.
The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.
Your new HTML template:
<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Your rowClicked function:
highlightedDiv: number;
rowClicked(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
A working demo is here.
More can be found here.
You are using MetaWidget, but you are not mentioning what version you are using.
If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-
https://github.com/AmitsBizruntime/MetawidetA2
Using this library will be the best solution for you.
Re-
Angular does not work based on DOM, it works based on Component.
If you like to work on DOM, then you should include jQuery in tour angular project from here-
How to use jQuery with Angular2?
But it is not a good practice.
These two URLs point to files which are identical except for one thing:
mobileCSS.html
noCSS.html
The mobileCSS.html file contains this line:
<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">
The noCSS.html file has the same line commented out:
<!--link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"-->
Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.
When jquery.mobile-1.4.3.css is used:
The initial values of the <select> elements are not displayed
The checkbox inputs do not update
Is this a known issue? Can you suggest a workaround for this?
Partial solution: correctedCSS.html
This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:
.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}
.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}
Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png
I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.
JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "Français" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
ng-change="setSource()" ng-model="selectedOption">
The solution is as #Omar suggested:
you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically
However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.
// Delay initial "refresh" until the page is ready
$(function () {
$("#source").selectmenu("refresh");
$("#target").selectmenu("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
})
// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
window.setTimeout(function () {
$("input[type='checkbox']").checkboxradio("refresh");
$("#target").selectmenu("refresh");
}, 1)
}
You can find these fixes in solutionCSS.html
I have a IButton instance and I want to change its name and color after click.
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
if(button.getTitle().equals("Enabled")) {
button.setTitle("Disabled");
button.setTitleStyle("disabledButton");
}
else {
button.setTitle("Enabled");
button.setTitleStyle("enabledButton");
}
}
});
As we do in general GWT project,
I have added following to the default .css file:
.enabledButton {
color:green;
}
.disabledButton {
color:red;
}
But when I run the application, it is not showing either red or green color.
Is there any other way in SmartGWT to apply CSS styles?
IButton is a StatefulCanvas, which means it handles states. This is done by adding suffixes after the base style name. For example if you set the titleStyle to "enableButton" and you move your mouse over the button, it will look for the css class: enableButtonOver. If the button is also focused, it will look for enableButtonFocusedOver etc (there are a couple of suffix combinations). Your example works if you click outside from the browser, so it will lost the focus and simply will use the enableButton css class. You can disable each state by for example setShowFocused(false). See the api.