Angular 6 HostBinding with multiple values?

Question

I have successfully used @HostBinding in my Angular 6 app to apply properties to the host component, as in applying a class when a variable is true:

@HostBinding('class.compact-ui') isCompact;

Now, however, I need to assign one of 4 possible classes based on the model of a select menu. For example, user can red, blue, or green.

I suppose I can use multiple host bindings for when any of the colors are true:

@HostBinding('class.green-ui') uiColor === 'green';

But that seems wrong. What's the proper way to do this?

Answer 1

To assign multiple classes to a host you can do this:

@HostBinding('class') classAttribute: string = 'classA classB';

For your case, you could do something like this:

@HostBinding('class') classAttribute: string;

// Example function that updates the classAttribute property
// You might handle it differently in your application
updateClassAttribute(color: string, isCompact: boolean) {
  const classes: string[] = [`${color}-ui`];

  if (isCompact) classes.push('compact-ui');

  this.classAttribute = classes.join(' ');
}

Note that above function logic can be written in a single line, like this:

this.classAttribute = [ ...isCompact ? ['compact-ui'] : [], `${color}-ui` ].join(' ');

Also, you might consider using a Redux store (e.g. @ngrx/store) for those values (isCompact, color) if you need them in multiple places in your application.

Answer 2

Note: This is for the latest versions of angular and may not work on older versions (as per the question title).

An object can also be returned which will add all the true values to the element and remove all the false values from the element.

  /** The size of the button. */
  @Input() size: ButtonSize = 'md';

  /** The classes to attach to the element. */
  @HostBinding('class')
  get elementClasses() {
    return {
      'primary-button': true,
      [`primary-button--${this.size}`]: true,
      'primary-button--color': false
    }
  }

Answer 3

You can do it with style too:

@HostBinding('style')
get style_binding()
{
    return { 
        display: 'grid',
        gap: this.config.internalGap,
        margin: this.config.margin,
        gridArea: this.config.area
    };
}