I have a list and the plugin (dragula
) I used, adds certain CSS class on certain action. I am using Angular 5. I want to find out the presence of certain class (
If you want to change all li.myClass, you can do like this:
Note the #questions
in the container div.
@ViewChild('questions') questions: any;
questions.nativeElement.querySelectorAll('.myClass').forEach(
question => {
question.classList.remove('myClass');
question.classList.add('newClass');
}
)
<div #questions class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions">
{{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
<li
#vc
data-toggle="tooltip"
data-placement="bottom"
title= {{question.questionSentence}}
class="well dragbox"
*ngFor="let question of questions; let i = index"
[attr.data-id]="question.questionId"
[attr.data-index]="i"
(click)="addThisQuestionToArray(question,i, $event)"
[class.active]="isQuestionSelected(question)"
#myId>
{{question.questionId}} {{question.questionSentence}}
</li>
</div>
Here are multiple ways to pass classes
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
From Official Docs
The Best and easiest way is : -
If student is null then dissabled else not. Use this in button attribute. If you are using bootstrap theme
[ngClass]="{disabled: (students === null) ? true : false}"
You can use id in your html
<button #namebutton class="btn btn-primary">login</button>
add viewchild in your.ts
@ViewChild('namebutton') namebutton: ElementRef;
create a function that will trigger the event
actionButton() {
this.namebutton.nativeElement.classList.add('class-to-add')
setTimeout(() => {
this.namebutton.nativeElement.classList.remove('class-to-remove')
}, 1000);
}
and call the function.
Import ElementRef
from angular core and define in constructor then try below code:
Below line of code will give you first occurrence of <p>
tag from Component. querySelector
gives you first item and querySelectorAll
gives you all items from DOM.
import { Component, ElementRef } from "@angular/core";
constructor(private el: ElementRef) {
}
let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.
Add Class:
if(!myTag.classList.contains('myClass'))
{
myTag.classList.add('myClass');
}
Remove Class:
myTag.classList.remove('myClass');