How can we apply custom directive conditionally in angular 6 when using node projection with <ng-container></ng-container>?

Question

I am trying to apply custom directive based on some condition in angular reactive form.But I have not find any way to implement this feature. Structural directive is not working in node projection.

     <input
        type="text"
        *customDirective="data"
       // directive1 /directive2    
       // I have to apply above directive based on some condition      
         />

Answer 1

Try this:

@Directive({
    selector: '[customRequired]'
})
export class CustomRequired {
    @Input() customRequired: boolean;

    @HostListener('change', ['$event'])
    onCall(event) {
        if(this.customRequired) {
        // code to be done ....
        }
    }
}