CODEWITHSUNDEEP
angulartwitter-bootstraptypescripttabsngx-bootstrap
amit gupta
amit gupta

Reputation: 1330

Active parent component tab from child component elements ngxbootstrap tab : angular 6

I am using Tabs from ngx-bootstrap, which I have put in my Parent Component. I am trying to switch active tabs in Parent Component from a link in the Child component. I see that the setTab method is being working when i call my selectTab() function from my parent component. But when i want to do same from my child component ( login component) then it's not working and i am getting fallowing error:

error: Cannot read property 'tabs' of undefined

I under stand that my tag is part of my parent component that's why i am getting this error.

I want switch the active tab from my child component too, Any help is greatly appreciated.

PARENT widget.component.html 

<tabset #logRegTab id="logRegTab">
    <tab (select)="fedEffect($event)" class="active" heading="Log In">
      <div [@animationFedInFedOut]="bindingVar" class="tab-pane active" id="login">

        <app-login #logRegTab></app-login>

      </div>
    </tab>
    <tab (select)="fedEffect($event)" heading="Register">
      <div [@animationFedInFedOut]="bindingVar" class="tab-pane" id="signup">

        <app-registration></app-registration>

      </div>
    </tab>
  </tabset>

PARENT widget.component.ts

  constructor(private router:Router ) { }
  @ViewChild('logRegTab') staticTabs: TabsetComponent;
  selectTab(tabId: number) {
    this.staticTabs.tabs[tabId].active = true;
  }

CHILD : login.component.html

<form id="login" >...</form>
<a (click)="goToRegPage()">Register as Condidate</a>

CHILD : login.component.ts

@ViewChild(TabsetComponent) staticTabs: TabsetComponent;

selectTab(tabId: number) {
    this.staticTabs.tabs[tabId].active = true;
  }

goToRegPage()
{
   if(this.router.url='register');
    this.selectTab(1);
}

Upvotes: 0

Views: 1920

Answers (1)

Jelle
Jelle

Reputation: 2186

The child component doesn't know the TabSetComponent since that is not part of it. You can however let the child component ask the parent component to switch to a tab. This can be done using an output.

CHILD : login.component.ts


@Output() outputSelectTab = new EventEmitter<number>();

selectTab(tabId: number) {
    this.outputSelectTab.next(tabId);
  }

goToRegPage()
{
   if(this.router.url === 'register') {
      this.selectTab(1);
   }

}

PARENT widget.component.html

 <app-login (outputSelectTab)="selectTab($event)" #logRegTab></app-login>

Hope that helps, good luck!

Upvotes: 1

Related Questions