Angular abstract component with generic and content projection

Question

What I want to do is to factorize code that is used in many part of my application. In all cases we do the same things with different kind of data and so with different sub-components.

For example I can have the same page for customers, invoices, etc. So in the abstract component I could have the methods (Ex:abstract search()) and attributes (Ex:search results)in common. Some methods will be overrides, some other not. In the abstract component template in this case I can use content projection to "inject" a search bar, a kind of table of results of my search,etc.

My abstract component should look like:

export abstract class AbstractListEditContainerComponent<T, U extends SearchFilters>  {
  protected readonly service?: AbstractListEditService<T, U>;
  protected filters: U;

  results: T[] = [];
  resultsCount: number = 0;

  protected constructor(... ) {}

  protected abstract initialSearchFilters(): U;

  abstract create(): Promise<void>;

  abstract find($event: U): void;

and in the template:

<div class="container">
  <div class="header">
    <div class="page-title">
      {{pageTitle}}
    </div>

    <div>
      <button mat-button
              mat-raised-button
              color="primary"
              class="submit-button"
              (click)="create()"
              type="button">
        <mat-icon fontIcon="add"></mat-icon>
        {{createButtonTitle}}
      </button>
    </div>
  </div>

  <ng-content select=".search-bar"></ng-content>
  <ng-content select=".list-headers"></ng-content>
  <ng-content select=".list-items"></ng-content>

My issue is:

• the abstract component cannot be declared in a module because it is abstract
• as it is not declared in a module, it is 'outside' the scope of angular in a certain way, so it cannot use in its template something else than html, any deps is unknown (like mat-button, mat-icon). Adding schemas: [CUSTOM_ELEMENTS_SCHEMA] is not a solution and does not work.

Any idea?