Repository: angular/angular
File: packages/core/src/render3/instructions/control.ts (TypeScript)

Code before:
  // If the value attribute of an option changed, its relevant.
  if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
    return true;
  }
  // Everything else is not relevant.
  return false;
}

/**
 * Updates the configured classes for the control.
 *
 * @param lView The `LView` that contains the control.
 * @param tNode The `TNode` of the control.
 * @param control The `ɵControl` directive instance.
 */
function updateControlClasses(lView: LView, tNode: TNode, control: ɵControl<unknown>) {
  if (control.classes) {
    const bindings = getControlBindings(lView);
    bindings.classes ??= {};
    const state = control.state();
    const renderer = lView[RENDERER];
    const element = getNativeByTNode(tNode, lView) as HTMLElement;

    for (const [className, enabled] of control.classes) {
      if (controlClassBindingUpdated(bindings.classes, className, enabled())) {
        if (enabled()) {
          renderer.addClass(element, className);
        } else {
          renderer.removeClass(element, className);
        }
      }
    }
  }
}

/**
 * Updates the inputs of a custom form control component with the latest state from the `field`.
 *
 * @param lView The `LView` that contains the custom form control.
 * @param componentIndex The index of the custom form control component in the `LView`.
 * @param modelName The name of the model property on the custom form control.
 * @param control The `ɵControl` directive instance.
 */
function updateCustomControl(
  tNode: TNode,
  lView: LView,
  control: ɵControl<unknown>,
  modelName: string,
) {
  const tView = getTView();
  const componentIndex = tNode.directiveStart + tNode.componentOffset;

Review comment (performance):
nit: I genuinely don't know how impactful saving a signal read is (especially when its already been read and marked as a produce for the existing consumer), but I tend to cache them:

```suggestion
      const value = enabled();
      if (controlClassBindingUpdated(bindings.classes, className, value)) {
        if (value) {
```

Code after:
  // Consider changes that may add / remove options, or change their text content.
  if (mutation.type === 'childList' || mutation.type === 'characterData') {
    // If the target element is a comment its not relevant.
    if (mutation.target instanceof Comment) {
      return false;
    }
    // Otherwise if any non-comment nodes were added / removed it is relevant.
    for (const node of mutation.addedNodes) {
      if (!(node instanceof Comment)) {
        return true;
      }
    }
    for (const node of mutation.removedNodes) {
      if (!(node instanceof Comment)) {
        return true;
      }
    }
    // Otherwise its not relevant.
    return false;
  }
  // If the value attribute of an option changed, its relevant.
  if (mutation.type === 'attributes' && mutation.target instanceof HTMLOptionElement) {
    return true;
  }
  // Everything else is not relevant.
  return false;
}

/**
 * Updates the configured classes for the control.
 *
 * @param lView The `LView` that contains the control.
 * @param tNode The `TNode` of the control.
 * @param control The `ɵControl` directive instance.
 */
function updateControlClasses(lView: LView, tNode: TNode, control: ɵControl<unknown>) {
  if (control.classes) {
    const bindings = getControlBindings(lView);
    bindings.classes ??= {};
    const state = control.state();
    const renderer = lView[RENDERER];
    const element = getNativeByTNode(tNode, lView) as HTMLElement;

    for (const [className, enabled] of control.classes) {
      const isEnabled = enabled();
      if (controlClassBindingUpdated(bindings.classes, className, isEnabled)) {
        if (isEnabled) {
          renderer.addClass(element, className);
        } else {
          renderer.removeClass(element, className);
        }