Prevent animation when mat-slide-toggle is added with ngFor

Question

In my angular app, I have a settings page where user can check several options. I use mat-slide-toggle for all options.

<div *ngFor="let setting of visibleSettings">
    <div style="display: flex;">
        <div>
            <p class="setting-name">{{setting.name}}</p>
            <p class="setting-description">{{setting.def.description}}</p>
        </div>
        <div style="flex: 1;"></div>
        <mat-slide-toggle
                class="toggle-setting"
                name="{{setting.name}}"
                [ngModel]="setting.value"
                (change)="onSettingChanged(setting, $event)">
        </mat-slide-toggle>
    </div>
</div>

visibleSettings member is initialized with a copy of current setting values, and all changes done by user are reflected in this copy. User can discard or save changes after modifying settings. Whenever user discards or saves changes, visibleSettings gets re-initialized with a copy of latest settings.

When visibleSettings gets re-initialized, the slide toggles which should be in checked state initially becomes unchecked, and then it gets checked with an animation. This is a distraction to the user, since whenever user saves or discards, the settings which were checked get unchecked for a moment and gets checked again.

Is there any way to prevent this and make slide toggles to stay in the state specified by the [ngModel]="setting.value" whenever the visibleSettings gets re-initialized?

Answer 1

Try binding the slide-toggle to checked instead of using ngModel. Usually, [ngModel] goes hand-in-hand with (ngModelChange) for use in template driven forms. Slide toggle has its own counterparts [checked] and (change) which are for use without a form. I suspect mixing the two separate models could be your issue.