Remove or add class in Angular

前端 未结 5 2021
感动是毒
感动是毒 2021-02-14 08:37

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 (

相关标签:
5条回答
  • 2021-02-14 09:22

    If you want to change all li.myClass, you can do like this:

    Note the #questions in the container div.

    Component.ts

    @ViewChild('questions') questions: any;
    
    questions.nativeElement.querySelectorAll('.myClass').forEach(
      question => {
        question.classList.remove('myClass');
        question.classList.add('newClass');
      }
    )
    

    Component.html

    <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>
    
    0 讨论(0)
  • 2021-02-14 09:23

    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

    0 讨论(0)
  • 2021-02-14 09:26

    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}"
    
    0 讨论(0)
  • 2021-02-14 09:31

    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.

    0 讨论(0)
  • 2021-02-14 09:43

    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'); 
    
    0 讨论(0)
提交回复
热议问题