@Component({
...
})
export class AccountsListComponent {
  readonly accounts$ = combineLatest([
    this.getBaseAccounts(),
    this.getLoanAccounts(),
    this.getDepositAccounts()
  ]).pipe(map(accounts => accounts.flat()));
  constructor(
    private readonly baseAccounts: BaseAccounts,
    private readonly deposits: DepositsService,
    private readonly loans: LoansService
  ) {}
  private getBaseAccounts(): Observable<AccountListItem[]> {
    return this.baseAccounts.getAccounts().pipe(
      map(accounts =>
        accounts.map(account => ({
          info: account,
          type: "base"
        }))
      )
    );
  }
  private getDepositAccounts(): Observable<AccountListItem[]> {
    return this.deposits.getAccounts().pipe(
      map(accounts =>
        accounts.map(account => ({
          info: account,
          type: "deposit"
        }))
      )
    );
  }
  private getLoanAccounts(): Observable<AccountListItem[]> {
    return this.loans.getAccounts().pipe(
      map(accounts =>
        accounts.map(account => ({
          info: account,
          type: "loan"
        }))
      )
    );
  }
}

<ng-container *ngFor="let account of accounts$ | async">
  <div class="account" [ngSwitch]="account.type">
    <ng-container *ngSwitchCase="'deposit'">
      <div class="name">{{account.info.name}} - {{account.info.amount}}</div>
      <div class="status">Закроется {{account.info.closeDate}}</div>
    </ng-container>
    <ng-container *ngSwitchCase="'loan'"> {{account.info.info.name}} - {{account.info.info.amount}} |
      <span style="color: red">{{account.info.info.status}}</span>
    </ng-container>
    <ng-container *ngSwitchCase="'base'">
      {{account.info.name}} - {{account.info.balance}}
    </ng-container>
  </div>
</ng-container>

export type BaseAccount = Readonly<{
  id: number;
  name: string;
  balance: number;
}>;
@Injectable()
export class BaseAccounts {
  getAccounts(): Observable<BaseAccount[]> {
    return of([
      {
        id: 1000,
        name: "Рублевый",
        balance: 150
      }
    ]);
  }
}

@Injectable()
export class DummyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: DummyInterceptor,
    multi: true
  }]
})
export class AppModule {}

export type AccountListItem = Readonly<{
  id: number;
  name: string;
  amount: number;
  status?: string;
}>;
export interface AccountListItemPlugin {
  getItems(): Observable<AccountListItem[]>;
}
export const ACCOUNT_LIST_ITEM_PLUGIN = new InjectionToken<
  AccountListItemPlugin
>("Плагин для подключения счетов");

@Injectable()
export class AccountsListManager {
  constructor(
    @Inject(ACCOUNT_LIST_ITEM_PLUGIN)
    private readonly accountListItemPlugins: AccountListItemPlugin[]
  ) {}
  getAccounts(): Observable<AccountListItem[]> {
    return combineLatest(
      this.accountListItemPlugins.map(plugin => plugin.getItems())
    ).pipe(map(items => items.flat()));
  }
}

@Injectable()
export class BaseAccountsPluginService implements AccountListItemPlugin {
  getItems(): Observable<AccountListItem[]> {
    return of([
      {
        id: 1000,
        name: "Рублевый",
        amount: 150
      }
    ]);
  }
}

@NgModule({
  providers: [
    {
      provide: ACCOUNT_LIST_ITEM_PLUGIN,
      useClass: BaseAccountsPluginService,
      multi: true
    },
  ]
})
export class AppModule {}

@Component({
  ...
})
export class AccountsListComponent {
  readonly accounts$ = this.accountsListManager.getAccounts();
  constructor(private readonly accountsListManager: AccountsListManager) {}
}

<div *ngFor="let account of accounts$ | async" class="account">
  <div class="name">{{account.name}} - {{account.amount}}</div>
  <div *ngIf=”accounts.status” class="status">{{account.status}}</div>
</div>

export type AccountListItem<A> = Readonly<{
  id: number;
  name: string;
  amount: number;
  account: A;
  status?: PolymorpheusContent<AccountListItemContext<A>>;
}>;
export type AccountListItemContext<A> = Readonly<{
   account: A;
}>

@Component({
    selector: 'loan-account-status',
    template: `<span class="negative">{{context.account.info.status}}</span>`,
    styles: ['.negative {color: red;}'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoanAccountStatusComponent {
    constructor(
      @Inject(POLYMORPHEUS_CONTEXT)
      readonly context: AccountListItemContext<LoanAccount>
  ) {}
}

@Injectable()
export class LoanAccountsPluginService
  implements AccountListItemPlugin<LoanAccount> {
  private readonly accountStatus = new PolymorpheusComponent(
    LoanAccountStatusComponent,
    this.injector
  );
  constructor(private readonly injector: Injector) {}
  getItems(): Observable<AccountListItem<LoanAccount>[]> {
    return this.getAccounts().pipe(
      map(accounts => {
        return accounts.map(account => ({
          id: account.id,
          name: account.info.name,
          amount: account.info.amount,
          account,
          status: this.accountStatus
        }));
      })
    );
  }
  private getAccounts(): Observable<LoanAccount[]> {
    return of([
      {
        id: 1,
        info: {
          name: "Кредитный счет",
          amount: 1000,
          status: "Activation"
        }
      }
    ]);
  }
}

<div *ngFor="let accountItem of accounts$ | async" class="account">
  <div class="name">{{accountItem.name}} - {{accountItem.amount}}</div>
  <div class="status">
    <polymorpheus-outlet
      [content]="accountItem.status"
      [context]="{account: accountItem.account}"
    >
    </polymorpheus-outlet>
  </div>
</div>