IdsScrollView: incorrect controls after assigning a new array to ngFor

[kellyFeng1]

Describe the bug
we are using the ids-layout-grid inside an ids-scroll-view. When the screen size changes from mobile to desktop, we will assign a new array to the item2DArray as the number of items in one slide changes.

However, I just found when I assign a new array to the item2DArray when I am not in the first slide, the first circle button in the carousel will become blue like it automatically scrolls to the first slide, but the slide doesn't change.

before assigning

after assigning a new array

HTML

<ids-scroll-view #scrollView>
  <div *ngFor="let items of item2DArray" slot="scroll-view-item">
   <ids-layout-grid
       cols="4"
       rows="3"
       cols-sm="12"
       rows-sm="2"
       gap="md"
       flow-sm="column"
       flow="row">
       <ids-layout-grid-cell col-span="2" *ngFor="let item of items">
            <ids-icon [icon]="item.name"></ids-icon>
          <ids-text font-size="20" text-align="center">{{ item.name }}</ids-text>
       </ids-layout-grid-cell>
     </ids-layout-grid>
  </div>
 </ids-scroll-view>

Besides, also wondering if it is possible to remove the controls when there is only one slide.

Platform

• Infor Application: WFM

[EdwardCoyle]

@kellyFeng1 the pager button controls won't disappear automatically, but they are can be hidden/shown under whatever conditions you'd like to implement using the suppress-controls attribute:

Can you pass along some information about the dataset (or the dataset itself) you're using? I'm also not clear on what you're trying to display per slide? Are you sometimes displaying multiple items per slide as opposed to one, similar to the SoHo circle pager?

[tmcconechy]

Lets see what @kellyFeng1 says but my assumption was that if an ngFor is updated it doesnt reflect in the component. Maybe need a slotchange ultimately similar to https://github.com/infor-design/enterprise-wc/pull/1661/files

I think an option to hideIfOne would be ok (have to check if there is any with a similar name already for consistency).

[kellyFeng1]

Hi @EdwardCoyle and @tmcconechy, yes we have similar case to this SoHo circle pager. I think the issue here is the control doesn't reflect the real slide number after ngFor is updated.
For example, we have 16 items to display. This is what we have for mobile view. Normally, these items should be displayed at first slide.

and this is the second slide

And we have a different layout in desktop view like this.

The issues happen when I am at the second slide in desktop view, and then I resize to mobile view. It will display the items at second slide, but the control show i'm at the first slide.

If I tried to go to the third slide, the items displayed correctly, but the control will look like this. And if I click on the second dot, nothing happens.