Apply Class on Element Inside Ng-Container with [Ngtemplateoutlet]

I have a PARENT component which has a CHILD component. This PARENT component holds ng-template which will be bound into the CHILD component.

In order to style the ng-container's element (svg), I used ng-deep and it worked.

What I want now is to dynamically add a class to the ng-container's element (svg) from the CHILD component (like ngClass);

Please see my code below for better understading.

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>

...

TYPESCRIPT:

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;
  }

  ...

SCSS:

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

Maya Lin-Takahashi

Consumer Tech & Gadget Reviewer

Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.