Применить класс к элементу внутри ng-контейнера с помощью [ngTemplateOutlet]

Question

У меня есть компонент PARENT, у которого есть компонент CHILD. Этот компонент PARENT содержит ng-template, который будет привязан к компоненту CHILD.

Чтобы style элемент ng-container (svg), я использовал ng-deep, и он работал.

Теперь я хочу динамически добавить class к элементу ng-container (svg) из компонента CHILD (например, ngClass);

См. мой код ниже для лучшего понимания.

PARENT

HTML:

...

<app-input [icon]="userIcon"></app-input>

...

<!-- TEMPLATES -->

<ng-template #userIcon>
    <svg>...</svg>
</ng-template>

---

CHILD

HTML:

<ng-container *ngIf="$icon" [ngTemplateOutlet]="$icon"></ng-container>

...

ТИП:

export class InputComponent implements ControlValueAccessor {
  ...

  @Input('icon') public $icon: TemplateRef<any>;
  private color: boolean = false; // --> When this is true, apply a new class

  public onFocus(): void {
    this.color = true;
  }

  ...

S CSS:

::ng-deep {
    svg {
        transition: .3s fill;
        fill: map-get($colors, placeholder);
    }
}

Answer 1

с ng-контейнером вы можете передать контекст, например

<ng-container [ngTemplateOutlet]="user;context: {color: className}></ng-container>

, тогда вы можете использовать его, как в шаблоне

<ng-template let-color="color">
    <div [class]="color"></div>
</ng-template>