Angular5 - @HostBinding instead of :host

Question

I read that its better to use @HostBinding instead of :host. So i think about change my component.ts

@Component({
    host: {
        'class': 'cover',
        '[class.uploading]': 'uploadProgress > 0',
    }
})

This works fine, but when i change it to:

export class Cover {
    @HostBinding('class') classes = 'mark6-cover';
    @HostBinding('[class.uploading]') uploadProgress > 0;

    @Input() uploadProgress = null;
}

i get errors and nothing works. What i did wrong here? And how can i make the variable uploadProgress to a observable?

Answer 1

A counterpart to '[class.uploading]': 'uploadProgress > 0' would be:

@HostBinding('class.uploading')
@Input() 
uploadProgress = null;

uploadProgress input can be set asynchronously from observable subscription or elsewhere.

uploading class will be triggered for truthy uploadProgress, which is likely the expected behaviour.

In case the condition is different (e.g. input value can be negative, while a class should be triggered for positive values only), extra property can be added:

@Input() 
uploadProgress = null;

@HostBinding('class.uploading')
get isUploading() {
  return this.uploadProgress > 0;
}

If the condition is complex, it's preferable for a component to have OnPush change detection strategy.