How to change css styles in Angular on Click for animation

Question

hey everyone I am building a hamburger menu and when I toggle the menu I want to add/remove a certain css property a existing class. Here's my code

burger.component.html

<div class="top-nav--hamburger--container" (click)="handleHamburger()">
      <div  class="hamburger-bar--top"></div>
      <div class="hamburger-bar--bot"></div>
</div>

And my css looks like this

.hamburger-bar--top
    width: 30px
    height: 5px
    background: red
    border-radius: 100px
    transition: transform 50ms ease-out
    // transform: rotate(45deg) translateY(5px) translateX(5px)

.hamburger-bar--bot
    margin-top: 8px
    width: 30px
    height: 5px
    background: red
    border-radius: 100px
    transition: transform 50ms ease-out
    // transform: rotate(-45deg) translateY(-5px) translateX(4px)

I want to add those transform properties to the existing class on click and remove them if already applied.

burger.component.ts

showStyle: boolean = false;

  constructor() { }

  handleHamburger(){
    this.showStyle = !this.showStyle;
    ...Add the properties to the class
    ...Can not figure this part out
  }

So on click I would like to add the transform properties on the class. I am not sure how to do this. Any help or idea would be great. Thanks

Sounds like a quick job for ngClass

Chris W.
– Chris W.

2018-08-09 14:48:52 +00:00
Commented Aug 9, 2018 at 14:48 — Chris W.
– Chris W., Commented Aug 9, 2018 at 14:48
stackoverflow.com/questions/47296759/…

Chellappan வ
– Chellappan வ

2018-08-09 14:52:32 +00:00
Commented Aug 9, 2018 at 14:52 — Chellappan வ
– Chellappan வ, Commented Aug 9, 2018 at 14:52

Muhammed Albarmavi · Accepted Answer · 2018-08-09 15:21:11Z

1

Just use ngClass directive to toggle class base of showStyle value.

<div class="top-nav--hamburger--container" 
    [ngClass]="{'class01':showStyle,'class02':!showStyle}" 
    (click)="handleHamburger()">
      ...
</div>

in case of multiple class {'class01 class03 class04':showStyle,'class02':!showStyle}

Also you can build your class list at handleHamburger method

  private showStyle = false;
  public classList = {};
  public handleHamburger() {
    this.showStyle = !this.showStyle;

    if (this.showStyle) {
      this.classList = {
        'class01 class02': true,
        'class03': true
      }
    } else {
      this.classList = {
        'classs04': true
      }
    }
  }

template

<div class="top-nav--hamburger--container" 
    [ngClass]="classList"  (click)="handleHamburger()">
      ...
</div>

edited Aug 9, 2018 at 15:21

answered Aug 9, 2018 at 15:06

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rainer Plumer · Accepted Answer · 2018-08-09 14:50:10Z

0

you can add conditional angular styles like this.

<div  class="hamburger-bar--top" ng-style="hamburgerTopStyle"></div>

handleHamburger() {
    this.hamburgerTopStyle = {'font-size': '10px', 'color': 'blue'};
}

answered Aug 9, 2018 at 14:50

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to change css styles in Angular on Click for animation

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related