ejs-tabs scroll buttons not visible on mobile

[Ashley Modise]

I'm attempting to add scrollable arrows to my ejs-tabs on mobile view.

When loading the component on fullscreen mode the resizing the window, the scroll buttons appear as expected

But when rendering the component directly in the mobile view, the scroll buttons don't appear and the tabs don't swipe

I am loading the tabs dynamically from my typescript

I have tried adding an ngIf to the tabs component in the dom and setting the viewChild reference to {static:true}, but doing this results in the tabs not rendering at all.

I have also tried adding the tabs dynamically with an ngFor

but then I get the following error

This error occurs on any element I try to ngFor from within the tabs component, but not on any other element on my component, even though my CommonModule is imported correctly.

is there a way to solve this?

[Vijay Ravi]

Hi Ashley, 
 

In the browser, you may observe scrollable buttons because they are using desktop mode. However, on a mobile device, the scrollable buttons may not be visible. In such cases, you can achieve the same left and right scrolling functionality by touching the screen. Additionally, if you want the navigation button in mobile mode you need to override the default tab styles. Refer the below shared styles and shared sample for your reference. Additionally you can can import the commonModule to resolve the ngfor issue that you mentioned

[app.Component.ts]

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

/**

* Adaptive Tab Component

*/

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html',

    styleUrls: ['app.component.css'],

    encapsulation: ViewEncapsulation.None,

    standalone: true,

    imports: [ TabModule, DropDownListModule, CommonModule ]

})

[app.component.css]

.e-tab .e-tab-header .e-toolbar-items.e-hscroll.e-scroll-device .e-scroll-right-nav {

  display: block;

}

Sample link: https://stackblitz.com/edit/angular-kkmput-xxmv5w?file=src%2Fapp.component.css,src%2Fapp.component.html

Output screenshot:

Sample link: https://stackblitz.com/edit/angular-kkmput-mjta7g?file=src%2Fapp.component.css,src%2Fapp.component.html,src%2Fapp.component.ts,package.json,angular.json

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay