*ngFor of array not responding to array changes

Hi all! :slight_smile:

I’ve got an ionic v6 capacitor app that builds buttons based on the content of an array, “sounds”. When the app starts, sounds is empty and no buttons appear. However, after a few seconds a Bluetooth BLE call fills in the sounds array with a bunch of sound names. However, the UI still shows no content unless I invoke a button to go retrieve the sounds. Ideally the UI would just update and the buttons would automatically appear.

Here’s my code:

    <div class="item-box">
      <div class="example-box" *ngFor="let sound of  sounds ; let i = index">
        <div class="example-box" cdkDrag>
            (press)="this.onPress($event, sounds[i])"

Here’s what the UI looks like:

And after the app connects to the BLE Peripheral the sounds come back and fill the sounds array. The UI doesn’t change until I press the Get Sounds button again - if the code was bound to the sounds array Angular change detection might cause the UI to update, but I can’t figure out how to bind it. Here’s what it looks like after you press the button again:

FWIW, the buttons are draggable and reorderable, but that’s not a requirement if another ionic construct might allow me to bind to the sounds array.

I read somewhere that Angular doesn’t notice an array changes content unless you create a copy of the array (which is a new object). Could that be what’s going on here? I’m grasping at straws… :frowning:

Thanks for any pointers or tips!