Extend icon tab bar to accept user defined HTML structure as the tab link template about fundamental-ngx

[khotcholava]

Hi @markywilson,
Can you clarify your desired icon tab bar behaviour?
Switch content areas (current functionality)?
Navigate between routes (like fd-tabs)?
Let me know if you have questions or prefer a different approach.

[markywilson]

Hi @khotcholava
Thanks for picking this up.

The FdTabs have the functionality of defining own template with routerLink (highlighting and selecting the tab based on routerLink directly from the template).

<nav fd-tab-nav>
    <div fd-tab-item>
        <a fd-tab-link [active]="rla1.isActive" [routerLink]="'tab1'" routerLinkActive #rla1="routerLinkActive">
            <span fd-tab-tag>Link 1</span>
        </a>
    </div>
    <div fd-tab-item>
        <a fd-tab-link [active]="rla2.isActive" [routerLink]="'tab2'" routerLinkActive #rla2="routerLinkActive">
            <span fd-tab-tag>Link 2</span>
        </a>
    </div>
    <div fd-tab-item>
        <a fd-tab-link [active]="rla3.isActive" [routerLink]="'tab3'" routerLinkActive #rla3="routerLinkActive">
            <span fd-tab-tag>Link 3</span>
        </a>
    </div>
</nav>

However this functionality isn't available in icon tab bar.

We mitigated that by adding extra code in the class

<fd-dynamic-page>
	<fdp-icon-tab-bar #tabs (iconTabSelected)="navigate($event)">
		<fdp-icon-tab-bar-tab [active]="activeTab === 'tab1'" label="Link 1" id="tab1"></fdp-icon-tab-bar-tab>
		<fdp-icon-tab-bar-tab [active]="activeTab === 'tab2'" label="Link 2" id="tab2"></fdp-icon-tab-bar-tab>
	
	    <ng-container fdpIconTabBarFreeContent>
	        <fd-dynamic-page-content>
	            <router-outlet></router-outlet>
	        </fd-dynamic-page-content>
	    </ng-container>
	</fdp-icon-tab-bar>
</fd-dynamic-page>

And in the class

public activeTab: string;

constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router
) {}

public ngOnInit(): void {
	this.activeTab = this.router.url.split('/').pop();
}

public navigate(item: IconTabBarItem): void {
    void this.router.navigate([item.id], {relativeTo: this.activatedRoute});
}