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>
