/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Used to diff and convert ngStyle/ngClass instructions into [style] and [class] bindings. * * ngStyle and ngClass both accept various forms of input and behave differently than that * of how [style] and [class] behave in Angular. * * The differences are: * - ngStyle and ngClass both **deep-watch** their binding values for changes each time CD runs * while [style] and [class] bindings do not (they check for identity changes) * - ngStyle allows for unit-based keys (e.g. `{'max-width.px':value}`) and [style] does not * - ngClass supports arrays of class values and [class] only accepts map and string values * - ngClass allows for multiple className keys (space-separated) within an array or map * (as the * key) while [class] only accepts a simple key/value map object * * Having Angular understand and adapt to all the different forms of behavior is complicated * and unnecessary. Instead, ngClass and ngStyle should have their input values be converted * into something that the core-level [style] and [class] bindings understand. * * This [StylingDiffer] class handles this conversion by creating a new output value each time * the input value of the binding value has changed (either via identity change or deep collection * content change). * * ## Why do we care about ngStyle/ngClass? * The styling algorithm code (documented inside of `render3/interfaces/styling.ts`) needs to * respect and understand the styling values emitted through ngStyle and ngClass (when they * are present and used in a template). * * Instead of having these directives manage styling on their own, they should be included * into the Angular styling algorithm that exists for [style] and [class] bindings. * * Here's why: * * - If ngStyle/ngClass is used in combination with [style]/[class] bindings then the * styles and classes would fall out of sync and be applied and updated at * inconsistent times * - Both ngClass/ngStyle should respect [class.name] and [style.prop] bindings (and not arbitrarily * overwrite their changes) * * ``` * *