Как изменить стили css в Angular по клику для анимации

Привет всем, я создаю гамбургер-меню, и когда я переключаю меню, я хочу добавить / удалить определенное свойство css существующего класса. Вот мой код

burger.component.html

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

И мой css выглядит так

.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)

Я хочу добавить эти свойства преобразования к существующему классу одним щелчком мыши и удалить их, если они уже применяются.

burger.component.ts

showStyle: boolean = false;

  constructor() { }

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

Итак, щелкнув мышью, я хотел бы добавить свойства преобразования в класс. Я не знаю, как это сделать. Любая помощь или идея были бы замечательными. Спасибо