Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
45
Make igx-tabs with closable button
posted

Hi people, the problem I am facing is that I'm not being able to insert a closable button inside igx-tab-item label. 

What I need to do is implement tabs with the following rules: 

  1. All route transition must create a tab and set it to active;
  2. When a tab is selected, I need to make a router transition;
  3. An option to close the tabs.

With the default igx-tab-item I've managed to create tabs based on an array, and could attach routes to tabs, so when a tab is clicked it navigates to the corresponding route, and when I navigate to a new route has not a corresponding tab, this tab is created and selected. But my problem is with the rule number 3. With the following code I could achieve what has been said.

tab.html

tab.ts (Creates a tab based in current url, get All tabs that already was defined, if the current tab doesn't exist, creates the current tab, and then select the current tab.)

So than I've managed to use IgxTabItemTemplate directive to give me a custom label template, but it gave me some problems that seems to be really difficult to deal with.

I've made the following changes:

tab.html

tab.ts (the variable tabsComponent is the ViewChild reference for #tabsComponent)

The problems I'm facing with the IgxTabs with custom label template is with activating the routerLink to tabs, I've tried to use tabsComponent.onTabItemSelect but this observable is activated two times in all route transitions, what made me spent much time trying to resolve this. Also, I'm facing problems to control the isSelected property in this approach.

So my question is how I can implement igxTabs with the 3 rules mentioned before? 

PS: The documentation is not so explained about this section, I suggest you to make sample with routerLinks and handling the isSelect property and to attach to the documentation,

PS2: If the default igxTabItem could receive a HTML would be helpful too.

Parents
  • 2180
    Verified Answer
    Offline posted

    Hello Gabriel,

    I have modified our Integration With Router Outlet Container sample to re-template the igx-tab-item like this:

    <igx-tabs>
      <igx-tab-item *ngFor="let tab of routerLinks; let i = index" 
        [routerLink]="tab.link"
        routerLinkActive #rla1="routerLinkActive"
        [isSelected]="rla1.isActive">
        <ng-template igxTab>
          <div class="header">
            {{tab.label}}
            <button igxButton="icon">
              <igx-icon (click)="deleteTab(i)">close</igx-icon>
            </button>
          </div>
        </ng-template>
      </igx-tab-item>
    </igx-tabs>

    Here is the stackblitz.

    Let me know if I may be of any further assistance.

    Sincerely,
    Diyan Dimitrov
    Senior Software Developer

Reply Children