CODEWITHSUNDEEP
angular
Reactgular
Reactgular

Reputation: 54771

Simple directive that uses TemplateRef yields "No provider for TemplateRef"

I'm trying to create a directive that creates a view based upon a condition. Just like the built in ngIf directive.

This is all I added to my project:

export class QueryNameContext {
    public name: string;
}

@Directive({
    selector: '[action]'
})
export class QueryNameDirective {
    @Input('action')
    public name: string;

    public constructor(private viewContainerRef: ViewContainerRef,
                       private templateRef: TemplateRef<QueryNameContext>) {
    }
}

When I try to use the directive in a template:

<div *action="thing"></div>

I get this dependency error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for TemplateRef!

My modules are importing CommonModule and I'm able to use TemplateRef in @ViewChild bindings of other directives.

I can't see what I've done wrong.

Upvotes: 4

Views: 7053

Answers (2)

Міша Грохола
Міша Грохола

Reputation: 406

I had similar problem, but i my case I had structural directive '[user]' and the error was caused by components that have @Input() user, so this binding were conflict with directive due to the same name.

Time to change directive name =)

Upvotes: 0

Reactgular
Reactgular

Reputation: 54771

Maybe someone will run into this problem so I'll leave this here.

I had two directives with the same selector by mistake. Renaming this fixed the Uncaught (in promise): Error: No provider for TemplateRef! error.

Upvotes: 4

Related Questions