Binding custom class inside ngClass in Angular - javascript

I am trying to bind a class name inside Angular ngClass so that the user will be able to set any class name he likes to the element.
I have the following in my js file and would like to assign this class name to the div element if this.customClass is set.
this.customClass= "list-custom-class";
HTML
<div class="row" [ngClass]="'{{customClass}}'}"></div>

To bind class
<div class="row" [ngClass]="customClass"></div>
please check the below
https://angular.io/api/common/NgClass

You can't use string interpolation in ngClass.Please use below it may help.
[ngClass]="[customClass]"

<div class="row {{customClass}}"></div>
No need of using ngClass.

Related

Cleaner way to add both static and variable class in html in Angular 2

It could be silly but how do I do something like this in angular 2 in a cleaner way? (Avoiding the string concatenation)
<div [class]="'indicator indicator-circle ' + colorClass"></div>
Explanation :
I want to add two static classes indicator & indicator-circle at all times but I also want the colorClass to be applied which is an input from the component class.
You could leverage the ngClass directive with an array:
<div [ngClass]="['indicator', 'indicator-circle', colorClass]"></div>
See this link for more details:
https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
You can use ngClass
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>
You need to put only colorClass in [ngClass]/[attr.class]/[class] property binding
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>

Modify class list for multiple elements

How can I modify the class list via jQuery or JavaScript for multiple classes in one step?
I have several classes in my form like
<div class="form-group has-error has-feedback">...</div>
<div class="form-group has-error has-feedback">...</div>
<div class="form-group has-error has-feedback">...</div>
How can I remove all the classes except form-group?
<div class="form-group">...</div>
<div class="form-group">...</div>
<div class="form-group">...</div>
You can use the .removeClass() method.
$(".form-group.has-error.has-feedback").removeClass("has-error has-feedback");
From the jQuery Documentation:
Description:
Remove a single class, multiple classes, or all classes from each
element in the set of matched elements.
...
If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.
JQuery
You can do it using attr function :
$('div.form-group.has-error.has-feedback').attr('class', 'form-group');
JAVASCRIPT
For javascript you can use querySelector and setAttribute() function :
document.querySelector('div.form-group.has-error.has-feedback').setAttribute('class', 'form-group');
Hope this helps.

JQuery. Remove a previous sibling in the DOM tree

I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/

select a div which is not inside another div jquery

let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you
See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');
I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/

How add css class with Mootools

<div class="generic_layout_container layout_ride_ridespec">
</div>
How to programmicaly add an extra class or one more property with existing class to above div.
I would like out put as follows
<div class="generic_layout_container layout_ride_ridespec example_class">
</div>
Please excuse id/name solution, there is little difficulty to add an id or name for above element.
Thanks
MooTools does have an addClass() method. Eg:
HTML
<div id="myElement" class="testClass"></div>
Javascript
$('myElement').addClass('newClass');

Categories

Resources