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

1 Answer

with ng-container you can pass context like

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

then you can use it like in template

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