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...
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>
Must Read
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);
}
}