Append a class to clr-tab

Question

I'm trying to render Clarity tabs horizontally since vertical tabs are not yet available. To be more clear, links are verticals but the main layout is horizontal (links + contents).

NB: I'm using angular 4.x

And the customization is very limited because all clr-tabs are rendered aside the main ul.nav element containing all links.

There is no obvious way to determine in pure CSS which one is active. :empty cannot help.

So, I'm looking for solution with angular to append an active class on the activated clr-tab in order to widely display it.

Ideally, something like

<clr-tabs>
  <clr-tab *ngFor="..." [ngClass]="{'active': ???????}">
    <button type="button" clrTabLink>...</button>
    <clr-tab-content *clrIfActive>
      ....
    </clr-tab-content>
  </clr-tab>
</clr-tabs>

Thanks

Answer 1

As I said in my comment above, if you can, I would recommend using the vertical nav component

If that's out of the question you can still override the clarity css using the Angular recomended (but deprecated)

::ng-deep.nav>.active {
  color: red!important;
}

As they say in the docs

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Answer 2

The temporary solution I used is a simple but ugly method override.

Any graceful way is welcome.

import {ɵl /* for IfActiveDirective */ } from "@clr/angular";

@Component()
class Component {
  constructor(renderer: Renderer2) {
    ɵl.prototype.updateView = function (value) {
      if (value) {
        renderer.addClass(renderer.parentNode(this.template.elementRef.nativeElement), "active");
        this.container.createEmbeddedView(this.template);
      } else {
        renderer.removeClass(renderer.parentNode(this.template.elementRef.nativeElement), "active");
        this.container.clear();
      }
    };
  }
}