This dynamic style in angular allows us to create dynamic css classes at runtime

angular-example-gist.ts

    let hrStyle: string = `
    .underline {
      height: .25rem;
      width: 0%;
      margin: 0;
      background: black;
      border: none;
      transition: .3s ease-in-out;
      position: relative;
    }
   `;

angular-example-gist2.ts

  getStyleClass(tab: Tab) {
    let index = 0;
    for (let i = 0; i < this.tabs.length; i++) {
      if (this.selectedTab == this.tabs[i]) {
        index = i+1;
      }
    }
    let str = '{ "tabSelected tabUnderline" : ' + String(this.selectedTab == tab) + ' }';
    return JSON.parse(str);
  }