Changing Tab from typescript

Topic: Changing Tab from typescript

mog5808 pro asked 7 years ago

I want to change the Angular tabset from typescript. It appears selectedIndex does not work. Here is what i tried HTML

<tabset #tabGroup [buttonStyle]="'nav-tabs tabs-2 unique-color'" [contentStyle]="'card'" [selectedIndex]="selectedIndex">

Calling the TS method <li (click)="changeTab('1')"> TS

changeTab(tabIndex) {
    this.selectedIndex = tabIndex;
  }

Add comment

mog5808 pro answered 7 years ago

1 0 Best answer

My code was like @ViewChild('teamTabs') public teamTabs; and

changeTab(tabIndex) {
    this.teamTabs.setActiveTab(tabIndex);
  }

It only worked when i changed it to @ViewChild('teamTabs') public tabs; and

changeTab(tabIndex) {
    this.tabs.setActiveTab(tabIndex);
  }

I have no idea why but the above worked and thanks for your time mate Cheers,

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

I do this on us quickstart pack with your code

<strong>app.component.ts:</strong>
<pre><code>import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  @ViewChild('tabs') public test;

changeTab() {
    this.test.setActiveTab(3);
  }

}</code></pre>

<strong>app.component.html:</strong>
<pre><code>
<tabset #tabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'">
    
    <tab ripple-radius heading="Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    
    <tab ripple-radius heading="Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    
    <tab ripple-radius heading="Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Last</p>
            </div> 
        </div>
    </tab>
</tabset>

Also, chceck console if you don't have any errors.

Please insert min. 20 characters.

I do this on us quickstart pack with your code app.component.ts:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  @ViewChild('tabs') public test;

  changeTab() {
    this.test.setActiveTab(3);
  }

}

app.component.html:

<!-- Tabset tabs -->
<tabset #tabs [buttonStyle]="'nav-tabs tabs-3 red'" [contentStyle]="'card'">
    <!--Panel 1-->
    <tab ripple-radius heading="Profile">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 2-->
    <tab ripple-radius heading="Follow">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </div> 
        </div>
    </tab>
    <!--Panel 3-->
    <tab ripple-radius heading="Contact">
        <div class="row"> 
            <div class="col-12">
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Last</p>
            </div> 
        </div>
    </tab>
</tabset>

<button (click)="changeTab()">Set Last</button>

Also, chceck console if you don't have any errors.

Add comment

mog5808 pro answered 7 years ago

0 0 Best answer

Hi, I do import ViewChild. But still does not work.

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

You code work. Check if you import ViewChild from @angular/core?

Add comment

mog5808 pro answered 7 years ago

0 0 Best answer

Wonderful, that worked well, But how can i do that from ts? I tried the following @ViewChild('your_id') public your_id;

changeTab(){
this.your_id.setActiveTab(2);
}

Any ideas?

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

Hi, This code will newer work because we don't have any selectedIndex property binding in a tabset component. Only thing what you must do is add some id to component #your_id, then you cane use it in this same component: <button ripple-radius (click)="your_id.setActiveTab(1)">1</button> tabs are starting from 1! Regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

mog5808

Pro User 26Support score
15Questions 21Answers 0Snippets