How to reuse layout.component.ts with routing in Angular?

my goal is to reuse accounts.layout.ts for 2 paths /v3/signin/identifier and /v3/signin/challenge/pwd.

The problem is <ng-content select="[right-content-action]" /> do not work well with <router-outlet/>

What I’ve tried:

create a accounts.layout.ts

It works well if I use it in sign-in-identifier.page.html.

accounts.layout.ts

<div class="overlay" [class.overlay-show]="showOverlay"></div>

<div class="main">
  <img class="logo" src="/assets/google-logo.svg" alt="google logo" />
  <div class="section">
    <div class="left-content">
      <span class="com-headline-5">{{ title }}</span>
      <span class="com-headline-6">{{ description }}</span>
    </div>
    <div class="right-content">
      <ng-content select="[right-content-input]" />

      <div class="actions">
        <ng-content select="[right-content-action]" />
      </div>
    </div>
  </div>
</div>

sign-in-identifier.page.html

<acc-accounts
  title="Sign In"
  description="Use your Google Account"
  [showOverlay]="isLoading"
>
  <com-input-text
    #inputEmail
    placeholder="Email"
    [(value)]="email"
    [errorMessage]="errorMessage"
    right-content-input
  />

  @if (isCreateAccountEnabled) {
    <com-button-basic (buttonClick)="onCreateAccount()" right-content-action
      >Create account</com-button-basic
    >
  }

  <com-button-flat
    (buttonClick)="onNext()"
    [disabled]="isLoading"
    right-content-action
    >Next</com-button-flat
  >
</acc-accounts>

try to use it with <router-outlet /> in app.component.html

app.component.html

<acc-accounts>
  <router-outlet />
</acc-accounts>

Expected result:

Actual result: