angular6: I want my inherited component to have some propertys of the parent

Question

I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.

As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.

All my components have the same host property:

@Component({
  selector: 'td[app-text-col]',
  templateUrl: './text-col.component.html',
  styleUrls: ['./text-col.component.css'],
  host: {
    "[hidden]": "col.deactivated"
  },
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}

Is it possible to somehow move this to the TableCellMasterComponent?

Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?

Can I move the changeDetection to the Master?

Answer 1

The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.

There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:

@HostBinding('hidden') get hidden(): boolean { return col.deactivated; }