Avoid class selector repetitions in angular

Suppose you have n different angular components all requiring a common class selector "A", like:

<component-i class="A"></component-i>

A simple out-of-the-box approach could be to add said class to the decorator @Component's host key as host: {'class': 'A'}, in every single component:

@Component({
  selector: 'component-i',
  templateUrl: './ui.component-i.html',
  styleUrls: ['./ui.component-i.sass'],
  host: {'class': 'A'}
})

This would redound the line host: {'class': 'A'} n times.

I believe that this would be a bad design, and I'm trying to find ways to avoid such code redundancy.

My current idea is to create a decorator @CustomComponent that wraps @Component in such a way that the redundancy would be dropped in a fashion similar to:

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

function CustomComponent(data:object):TypeDecorator {
  let my_class:string = "A"
  let host:object = data["host"] || {};
  let class_:string = host["class"] || '';
  host["class"]=class_+my_class;
  data["host"] = host;
  return Component(data);
}

@CustomComponent({
  selector: 'component-i',
  templateUrl: './component-i.html',
  styleUrls: ['./component-i.sass']
})
export class ComponentI {}

Is this approach correct? There are other, cleaner, approaches?

from Avoid class selector repetitions in angular