TypeScript change css styling of button with OnClick() function

Question

Information

I am learning TypeScript and am translating my already existing CoffeScript code into TypeScript (Lit Web Component).

Issue

I have an issue with the following line in understanding how it would be translated into TypeScript:

render: ->
  className = if (@props.firstProp) in @props.secondProp then "buttons buttons-active" else "buttons"

The code basically changes the styling of a toggle button. If a specific prop exists it triggers the custom button class and if its clicked, the active styling is applied.

What I expect

I want to click on the switch and change its css styling whilst also setting the condition to true/false. If its true, then use the container-style-light button button-active styling, when clicked again, set it to false and change the styling back to just container-style-light button.

    @customElement('toggle-button')
    export class ToggleButton extends ElementLit {
      static styles = css`
      button { border-width: 1px;
        border-style: solid;
        width: 50px;
        min-width: 50px;
        height: 50px;
        border-radius: 25px;
        font-size: 0.9rem;
        margin: 0;
        padding: 0;    
    }container-style-light button {
      border-color: var(--highlight);
      color: var(--highlight);
      background-color: var(--background);
    }
    container-style-light button button-active {
      background-color: var(--highlight);
      color: var(--foreground);
    }   

    @property()   
    condition = true;

  constructor() {        
    super();
    this.disabled = false;
    this.displayName = `${this.condition}`   
}

 render() {
    return html`
    <style>${ToggleButton.styles}</style>
    <label>
      <button type="button" 
      ?disabled="${this.disabled}"
      @click=${this.onClick}>
      ${this.displayName}
      </button>
    </label>`;
  }

    
      private onClick(_e: Event) {
       //change the styling of the .button to button-active, set condition to true
      //if clicked on again, revert to the .button styling, set condition to false
    }     
 }

What would be the simplest way to do this in typescript? I appreciate the help as I have many similar components which I want to translate.

Ramesh HB · Answer 1 · 2022-08-22T12:52:25.447

Create classes object with property name as button class and set value to boolean. Use classMap directive to map classes to btn. and toggle on button onclick.

 const classes = {
  button_active: this.toggleBtnState;
 }

 private onClick(_e: Event) {
    this.toggleBtnState = !this.toggleBtnState
 }     

render() {
    return html`
    <style>${ToggleButton.styles}</style>
    <label>
      <button type="button" 
      ?disabled="${this.disabled}"
      @click=${this.onClick}>
      ${this.displayName}
      ${classMap(classes)}
      </button>
    </label>`;
  }```

TypeScript change css styling of button with OnClick() function

Information

Issue

What I expect

1 Answers1