Angular non destructive class HostBinding

keeps-class.comonent.ts

import { Component, Input, HostBinding } from '@angular/core';

/*
  <gist-keeps-class class="some classes" [booleanInput]="true" [stringInput]="some-thing"></gist-keeps-class>
  will output this:
  <gist-keeps-class class="some classes has-boolean some-thing" >
    this component keeps class="class" attributes
  </gist-keeps-class>

  it's not throughly tested, but should work?
*/

@Component({
	selector: 'gist-keeps-class',
	template: 'this component keeps class="class" attributes'
})
export class KeepsClass {

	@Input() booleanInput: boolean = false;
	@Input() stringInput: 'some-thing' | 'another-thing' | 'a-third-thing' = 'another-thing';

	@Input() class: string = ''; // override the standard class attr with a new one.
	@HostBinding('class')
	get hostClasses(): string {
		return [
			this.class, // include our new one 
			this.booleanInput ? 'has-boolean' : '',
			this.stringInput
		].join(' ');
	}
       
}