empty-state-cell.component.ts

export type EmptyStatePredicate = (value: unknown) => boolean;
export function emptyStateNumber(value: unknown) {
  return value === 0;
}

@Directive({
  selector: '[emptyCellState]',
})
export class EmptyCellStateDirective implements OnInit {
  @Input('emptyCellState') value: unknown;
  @Input('emptyCellStatePredicate') predicate: EmptyStatePredicate;

  constructor(
    private tpl: TemplateRef<any>,
    private resolver: ComponentFactoryResolver,
    private vcr: ViewContainerRef
  ) {}

  ngOnInit() {
    const predicate = this.predicate ?? isNil;

    if (predicate(this.value)) {
      this.vcr.createComponent(
        this.resolver.resolveComponentFactory(EmptyCellStateComponent)
      );
    } else {
      this.vcr.createEmbeddedView(this.tpl);
    }
  }
}

EmptyCellStateComponent.ts

@Component({
  selector: 'empty-state-cell',
  template: `<div class="empty-cell-state"></div>`,
})
export class EmptyCellStateComponent {}