0

I am trying to pass two parameters to my directive as separate parameters. I manage to add the parameters as one parameter (*ovLoading="!isDataReceived;noBackground:true"), but I would like to have it as two separate parameters, is that somehow possible?:

My directive looks like this:

    @Directive({
    selector: `[ovLoading]`,
})
export class LoadingDirective implements OnChanges, OnInit {
    @Input() public ovLoading: boolean;
    @Input() public ovLoadingNoBackground = false;

    private factory: ComponentFactory<LoaderComponent>;
    private viewRef: EmbeddedViewRef<any>;
    private loaderComponent: ComponentRef<LoaderComponent>;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver,
    ) {
        this.factory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);
    }

    public ngOnInit() {
    }

    public ngOnChanges() {
        if (this.viewRef == null) {
            this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
        }

        if (this.ovLoading) {
            this.loaderComponent = this.viewContainerRef.createComponent(this.factory);
            this.loaderComponent.instance.noBackground = this.ovLoadingNoBackground;
        } else if (this.loaderComponent != null) {
            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.loaderComponent.hostView));
            this.loaderComponent = null;
        }
    }
}

Her is how I use it (This is working):

<div class="header" *ovLoading="!isDataReceived;noBackground:true"></div>

And I would like to have it something like this (this is not working):

<div class="grid-view-header" *ovLoading="!isDataReceived" noBackground="true">
PNR
  • 555
  • 3
  • 12
  • 26

1 Answers1

0

You define your input like so:

@Input() public ovLoadingNoBackground = false;

but you use it like: 

noBackground="true"

possibly if you set the input to be 

@Input() public noBackground = false;

it would work.

it's possible though to do what you ask, see the following SO question: How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

msokrates
  • 188
  • 10
  • Thanks very much for you reply! I have looked at that question you are linking to before I asked my question, but can't make it work. I don't know if it is because i user *ovLoading instead of [ovLoading]? I have also tried your suggestion without any luck. – PNR Mar 03 '20 at 12:05
  • Do you get any errors or is it just the value that you get that's wrong? It's possibly because you use it like that. As you suggested try `
    ` instead
     – msokrates Mar 03 '20 at 12:59
  • If i include the directive like [ovLoading] then I get an error: NullInjectorError: StaticInjectorError(AppModule)[NgIf -> TemplateRef]: when using it like *ovLoading and an additional parameter then there is no error, but the value from the additional parameter is not parsed to the directory – PNR Mar 03 '20 at 13:48
  • Never seen that before.. Had a quick check and found the following which might help or could be completely irrrelevant? https://stackoverflow.com/questions/51048836/angular-5-static-injection-error – msokrates Mar 03 '20 at 14:28
  • Thanks for sharing :-) But I am not sure that has anything to do with my issue :-/ – PNR Mar 04 '20 at 13:20