javascript - Adding and removing class click function in Angular 2 Service - Stack Overflow

admin管理员组

文章数量:1410737

I'm trying to use CSS3 animation in my template, but I'm trying to find a away to add and remove class using (click)='function()' like jQuery way.

Question is how can I do the function below which is a jQuery in Angular 2?

This is what I have at the moment in my SharedService. I believe that you can't use Renderer angular core ponent in the service. Reason this is in a service is so other ponents can use it.

openBasketView() {
 $('#basketView').removeClass('fadeOutRight');
 $('#basketView').addClass('fadeInRight');
}
closeBasketView() {
 $('#basketView').removeClass('fadeInRight');
 $('#basketView').addClass('fadeOutRight');
}

Rather than using something like -- I like using function in (click) event is better and readable as all logic is in a block function.

ponent boolean

public showThis: Boolean = false;

template view

<div class="basket animated" [ngClass]="{'myClass': showThis}"> </div>
<button (click)="showThis = !showThis"></button>

I'm trying to use CSS3 animation in my template, but I'm trying to find a away to add and remove class using (click)='function()' like jQuery way.

Question is how can I do the function below which is a jQuery in Angular 2?

This is what I have at the moment in my SharedService. I believe that you can't use Renderer angular core ponent in the service. Reason this is in a service is so other ponents can use it.

openBasketView() {
 $('#basketView').removeClass('fadeOutRight');
 $('#basketView').addClass('fadeInRight');
}
closeBasketView() {
 $('#basketView').removeClass('fadeInRight');
 $('#basketView').addClass('fadeOutRight');
}

Rather than using something like -- I like using function in (click) event is better and readable as all logic is in a block function.

ponent boolean

public showThis: Boolean = false;

template view

<div class="basket animated" [ngClass]="{'myClass': showThis}"> </div>
<button (click)="showThis = !showThis"></button>

• javascript
• jquery
• css
• angular

Share Improve this question Follow edited Apr 17, 2017 at 21:13 MrNew asked Apr 17, 2017 at 17:47 MrNewMrNew 1,42466 gold badges2222 silver badges4848 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If the display logic is in a service injected in the ponent, you can call the service from the template to add the toggled class. Additionally, if you want to turn on block display after clicking the button, you can put that logic in the ponent or in the service (in the example below, that code is in the ponent).

The ponent:

class MyComponent {
    private displayBlock = false;
    private turnOnBlockDisplay() {
        this.displayBlock = true;
    }
    private getBlockClass() {
        return this.displayBlock ? "block" : "";
    } 
    constructor (private myService: ToggleClassService, ...) {
        ...
    }
    ...
}

The service:

class ToggleClassService {
    private fadeIn = false;
    public toggleClass() {
        this.fadeIn = !this.fadeIn;
    }
    public getClass() {
        return this.fadeIn ? "fadeInRight" : "fadeOutRight";
    }
}

The template:

<div [ngClass]="['basket', 'animated', myService.getClass(), getBlockClass()]">...</div>
<button (click)="myService.toggleClass(); turnOnBlockDisplay();">Toggle</button>

The CSS:

.basket {
    display: inline-block;
    ...
}
.basket.fadeInRight {
    background-color: red;
}
.basket.fadeOutRight {
    background-color: blue;
}
.basket.block {
    display: block;
}

You can test the code in this codepen (note: the "service" is not injected).

Alternative Way not use ts side varible use function

<li class="mobile-links__item" #childCatLi>
    <div class="mobile-links__item-title">
     <a routerLink="{{cat.link.link}}" class="mobile-links__item-link">{{cat.category.name}}</a>
     <button class="mobile-links__item-toggle"  type="button (click)="toggleClass(childCatLi)">
       <svg class="mobile-links__item arrow" width="12px" height="7px"><use xlink:href="./assets/images/sprite.svg#arrow-rounded-down-12x7"></use></svg>
     </button>
    </div>
</li>

ponent.ts side in toogleClass

toggleClass(elem:HTMLElement){
        elem.classList.toggle('mobile-links__item--open');
}

You should be using the below code

<div class="basket" [class.fadeOutRight]="showThis" [class.fadeInRight]="!showThis">
<div (click)="showThis = !showThis"></div>

Update 1 :

<div class="basket" [ngClass]="getClass()">

getClass() {
   if(this.showThis)
        return 'fadeOutRight';
   else 
       retun 'fadeInRight'
}

<div [ngClass]="{ 'c1, c2, c3' : true, 'fadeOutRight' : showThis, 'fadeInRight' : !showThis }

Update 2:

Have the classes in an array as

classes:string[] = ['basket', 'animated']
<div [ngClass]="classes></div>


 <button (click)="toggleClass()"></button>

toggleClass(){
    this.classes.splice(this.classes.length-1,1); // removes the class 
    this.show=!this.show;
    if(this.show) {
        this.classes.push('fadeOutRight')
     }else {
        this.classes.push('fadeInRight')
     }

LIVE DEMO

本文标签： javascriptAdding and removing class click function in Angular 2 ServiceStack Overflow