I have a component item that represents a card with the data about the item. Since all the cards have the same structure (price/color/size/photo categories are shown on each card, nothing more and nothing less), I would like to apply a conditional CSS, but I don't know how, since the cards' style differ (slightly) based on:
price (for example, the card is bigger if the price is lower)
if the user has marked it as favorite
whether they are a part of this or that component (the URL can be the same). For example, in a single view there is the first component with a X card's style and the second component with a Y card's style - but the cards have the same data.
I'd really appriciate any suggestion!
<div [className]="'example-class'"></div>
This allows us to add classes based on a condition:
<div [className]="condition ? 'example-class' : 'other-class'"></div>
Or we could build the class name at runtime:
<div [className]="'class' + someValue"></div>
we can easily toggle CSS classes like so:
<div [class.example-class]="condition"></div>
we can assign a variable class name :
<div [ngClass]="seleted-class"></div>
NgClass can also assign multiple static class names all at once:
We can also use ngClass to assign multiple CSS classes based on multiple conditions.
<div
[ngClass]="{
'example-class': condition,
'other-class': !condition
}"
></div>
<div [ngClass]="['example-class', 'other-class']"></div>
source : https://malcoded.com/posts/angular-ngclass/
You can use NgClass to add conditional classes. For more info, refer the documentation - https://angular.io/api/common/NgClass
Related
I have several divs, which I'm not going to put in v-for, but still need to unique reference them. For #click id attribute works well.
<div v-bind:class="setAreaStyle('CAR')" #click="setFocus($event)" id="CAR">
But is there a way I can use element id, without click event, as reference in called function, so setAreaStyle would received 'CAR' as argument?
<div v-bind:class="setAreaStyle(id)" id="CAR">
Use $event.target.id
<div :class="setAreaStyle($event.target.id)"
#click="setFocus($event)"
id="CAR"
>
I guess the id you'll use will come from the v-for item, no ? You can then use it in both places:
<div
v-for="item in items"
:key="item.id"
:class="setAreaStyle(item.id)"
:id="item.id"
#click="setFocus($event)"
>
Side note: the name setAreaStyle is strange (seems it will do some side effects), you should only get something here, and it is the class name => getClass would make more sense.
Or :style="getStyle(item.id)" if you want to add inline CSS
I have a loop displaying some markup that has dynamic class names. Is it possible to hide all elements with duplicate class name besides the first instance? For example below I would only want the first .SomethingDynamic1 and the first .SomethingDynamic2 to be visible.
I think I might be able to use the div[class^="group"] "starts with" attribute selector to achieve this but am I able to match dynamic text after that and filter out the duplicates? I would prefer a CSS only solution if possible.
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
Update (credit #Temani Afif)
If you want a CSS only solution, you will need to know the classes to filter beforehand.
Given that, you can simply use a siblings selector like the following:
.group-SomethingDynamic1 ~ .group-SomethingDynamic1 {
display: none;
}
Here is a stackblitz example
We are using ui-grid v3.1.1 and have a specific use-case where a grid needs to have certain rows selectable, and others not selectable, depending on the code of a specific cell in the row. We have been implementing the grid's html as:
<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
<div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>
and have been experimenting with the isRowSelectable gridOption which does what we want except for one issue: we don't want the disabled checkmark icon to appear on the non-selectable rows. Is there a way of causing the checkmark to be hidden/collapsed when the row is not selectable?
Thanks
You can achieve this by changing the rowHeaderIcon for non selectable rows.
You can override the template for the selection row header button and add custom css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template will use a method in your controller scope to identify if the row is selectable.
Found this useful plunker.
I'd like to propose this Plunker which has no icon at all for unselectable rows
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
I'm trying to create a component, or a view if that is better suited for this, that binds to given model's computed properties and changes style attributes accordingly. I'm using Ember App Kit if that affects in anyway how this should be done.
The component would be a a meter that has 2 computed properties to bind to: "limitDeg", "currentValueDeg". Every model instance that will use this component can supply those as model computed properties to the component.
The meter has 3 overlapping divs - ".meter-div" being just background with no bindings, and one of which will be rotated with CSS3 transform by X-degrees to show the current "limitDeg". So adjusting the "transform: rotate(###deg);" is the key here. There is a "indicator-div", that is simple indicator that similarly rotates based on the "currentValueDeg" with CSS3 animation loop.
Below is a basic rough outline of how I've thought of having the component/view:
<div class="my-component-container">
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</div>
...and I would use it like this for example:
{{#each}}
...
{{my-component}}
...
{{/each}}
1) I would like the component to bind to the model so, that when the "limitDeg" computed property changes, the ".limit-div" will be rotated by X-degrees with CSS3 transform: rotate(###degrees);.
2) I would like animate the ".indicator-div" with a CSS3 animation that loops infinitely, binding to the currentValueDeg computedProperty.
Is this something I should even try do this with one component/view, or rather do it this multiple components/views inside one partial?
If you're using handlebars, just wrap your component in tags that specify it as such:
<script type='text/x-handlebars' data-template-name='components/component_name'>
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</script>
Then include it in your view like this:
{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}}
If you wanted the component to display a model property, you could do something like this inside the component (using the variables in my example above):
<span class='property-wrapper'>
{{objectToPassIn.objectProperty}}
</span>
Edit:
For the sake of clarity, objectToPassIn is the model that is passed to the view that calls the component.
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.