Skip to main content

glintColorForModel

The glintColorForModel directive applies a dynamic background color gradient to HTML elements, such as glint-panel or <div>. The specific color chosen for the gradient is determined by the element type of the model provided to the directive.

This directive is particularly effective when combined with the glintColorForName directive, allowing you to create visually appealing two-color gradients.

Usage​

To apply the glintColorForModel directive, simply bind a model object to its input property:

<glint-panel [colorForModel]="model">
</glint-panel>

<div [colorForModel]="anotherModel" style="padding: 20px;">
  This div has a background color based on 'anotherModel'.
</div>

Properties​

  • [colorForModel]: This required input property accepts a model object. The directive will inspect the element type of this model to determine the appropriate background color.

Defining Element Type Colors​

The color mapping for different element types is configured by providing an array of color definitions using the ELEMENT_CLASS_COLOR injection token. You can specify different colors for 'light' and 'dark' themes.

Via @Component providers​

You can define element type colors directly within the providers array of an Angular @Component decorator. This approach is suitable for component-specific color customizations.

@Component({
  //... other component configurations
  providers: [
    {
      provide: ELEMENT_CLASS_COLOR, // The injection token for element class colors
      multi: true,                 // Allows multiple providers for this token
      useValue: [
        {
          _type: 'elements::DataElement', // The specific element type to apply this color to
          theme: 'light',                // Color for the light theme
          color: 'lch(90% 10% 120)'      // The color value (e.g., LCH, HSL, RGB, hex)
        },
        {
          _type: 'elements::DataElement', // Same element type for the dark theme
          theme: 'dark',                 // Color for the dark theme
          color: 'lch(30% 20% 120)'      // The color value for the dark theme
        }
      ]
    }
  ]
})
export class MyComponent {
  //...
}

For a more modular and reusable approach, especially when developing plugins, it's recommended to provide color definitions via an ExtensionModule. This promotes better organization and discoverability of your color configurations.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      colors: [ // The 'colors' array within the extension configuration
        {
          type: 'elements::DataElement', // The element type
          theme: 'light',                // Color for light theme
          color: 'lch(90% 10% 120)'
        },
        {
          type: 'elements::DataElement', // The element type
          theme: 'dark',                 // Color for dark theme
          color: 'lch(30% 20% 120)'
        }
      ]
    })
  ]
})
export class MyExtensionModule {
}