CrlTab in vmwClarity with Angular2

Question

I have a list with months in Angular2 -> vmwCLARITY.

My problem is that I want for default the first month Active, but I get or the last month selected ->

CODE HTML --->>>>

Here I get 1 object with booleans, then I use a function for active my crl-tab. Also, I disabled some months. Then I need selected the first month enabled.

The code is same for all months.

<clr-tabs>
    <clr-tab>
        <button clrTabLink id="january"  [disabled]="!selectedMonths.jan" (click)="changeMonth(1)">Enero</button>
        <clr-tab-content id="january" *clrIfActive="isActive(selectedMonths.jan)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="february"  [disabled]="!selectedMonths.feb" (click)="changeMonth(2)">Febrero</button>
        <clr-tab-content id="february" *clrIfActive="isActive(selectedMonths.feb)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="march"   [disabled]="!selectedMonths.mar" (click)="changeMonth(3)">Marzo</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.mar)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="april"  [disabled]="!selectedMonths.apr" (click)="changeMonth(4)">Abril</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.apr)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="may"   [disabled]="!selectedMonths.may" (click)="changeMonth(5)">Mayo</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.may)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="june"  [disabled]="!selectedMonths.jun" (click)="changeMonth(6)">Junio</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.jun)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="juli"   [disabled]="!selectedMonths.jul" (click)="changeMonth(7)">Julio</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.jul)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="august" [disabled]="!selectedMonths.aug" (click)="changeMonth(8)">Agosto</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.aug)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="september" [disabled]="!selectedMonths.sep" (click)="changeMonth(9)">Septiembre</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.sep)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="october"   [disabled]="!selectedMonths.oct" (click)="changeMonth(10)">Octubre</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.oct)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="november"  [disabled]="!selectedMonths.nov" (click)="changeMonth(11)">Noviembre</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.nov)">
        </clr-tab-content>
    </clr-tab>
    <clr-tab>
        <button clrTabLink id="december"   [disabled]="!selectedMonths.dec" (click)="changeMonth(12)">Diciembre</button>
        <clr-tab-content *clrIfActive="isActive(selectedMonths.dec)">
        </clr-tab-content>
    </clr-tab>
</clr-tabs>

Component.ts ->

 public selectedMonths = this.service.months;
 // Usada para que la marca roja se posicione en el primer mes activo
 public redMark: boolean = false;


    isActive(month: boolean) { 
        if (!this.redMark && month) {
            this.redMark = true;
            return true;
        } else {
            return false;
         }
    }

 changeMonth() {
        this.redMark = false;
}

Here I get the Object->moths from my service.ts, I use a boolean for stop the red mark.

Now I have a problem because All months having *clrIfActive = false, I got selected first month enabled but now I can't change other month...

Example ->

My red mark start in Julio, perfect, but If I do click in december, my red mark is in Julio .....

I changed this for -->

isActive(month: boolean) { 
      return month;
}

Now my user can select other month, the problem is that the red mark is in December ....

Example --->

Now I can select other month, but the problem is that my app start with red mark in the last month enabled ....

I need start app with the red Mark in the first month enabled.

Thanks.

Edit ->

Change Month -> I get month selected for my user, and then I call the fecht data for I can get the datas that month.

 public changeMonth = function (month: number) {
        this.redMark = false;
        this.month = month;
        this.fetchData();
    }

      fetchData(){
         this.service.getDataMonth(this.month).subscribe(
                data => {
                    this.params = data;
                    });
      }

may you show also your TypeScript code? a [mcve] would be much better — Massimo Costa, Oct 03 '18 at 10:42
I don't use Typescript for this. I tried with class="btn btn-link nav-link active" and aria-selected="true" from https://vmware.github.io/clarity/documentation/v0.13/tabs#guidelines but nothing. — EduBw, Oct 03 '18 at 12:55
In a future when I know how change for default a other month in html, then I suppose that I would change that property a code typescript, but now, I can't change my red mark a other month.. — EduBw, Oct 03 '18 at 12:57
The example you wrote in the post requires Angular running. May you create an example using StackBlitz ?? — Massimo Costa, Oct 03 '18 at 12:58
Sorry, I can't import clarity module in StackBlizzt... it is very dificult for my.. — EduBw, Oct 03 '18 at 13:04
You can start from one of the template listed at the end of this [page](https://vmware.github.io/clarity/documentation/v0.13/get-started) — Massimo Costa, Oct 03 '18 at 13:22
@Massimo Costa. I don't need template, I am using clarity and I have a problem with tabs in clarity ... — EduBw, Oct 03 '18 at 13:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181223/discussion-between-massimo-costa-and-edubw). — Massimo Costa, Oct 03 '18 at 13:45
@MassimoCosta Eudes, Pls search my Edit, I need a little help :D — EduBw, Oct 03 '18 at 15:11
@MassimoCosta I showed you the code for chat, now You have my code here, pls, check my edit. I need help with this.... — EduBw, Oct 04 '18 at 06:41
your `changeMonth()` method accepts no parameters and you're calling it with a parameter in the template. If you don create a [mcve] no one can help you because no one can understand how to reproduce the issue — Massimo Costa, Oct 04 '18 at 09:59
I update with changeMonth, but you dont need that method, nor any, I showed what was necessary — EduBw, Oct 04 '18 at 10:35

score 2 · Accepted Answer · answered Oct 03 '18 at 13:39

2

By default, the first tab is going to be displayed unless you specify otherwise.

In your case, you want to have *clrIfActive="true" for the first non-disabled tab. Since you didn't share the code of your component I cannot help you with that, but it shouldn't be too hard to iterate over the months to find which one it is.

answered Oct 03 '18 at 13:39

Eudes

1,521
9
17

ok thanks, this help me, now I need know how add *clrIfActive="true" to my html dynamically, I don't have CODE for this, I only code for disabled months if I get how month July. do you need that code ? – EduBw Oct 03 '18 at 13:45

CrlTab in vmwClarity with Angular2

1 Answers1