How to use templateUrl in Angular 2 directive

Question

How do I add a html template to a directive? Here is a sample code which does not work :

import { Directive } from '@angular/core';

@Directive({
selector: '[master-side-bar]',
templateUrl : 'master-side-bar.html' })

export class MasterSideBar {

constructor() {
console.log('Hello MasterSideBar Directive'); 
}

}

I get the following error :

Argument of type '{ selector: string; templateUrl: string; }' is not assignable to parameter of type 'Directive'. Object literal may only specify known properties, and 'templateUrl' does not exist in type 'Directive'.

Jayakrishnan · Accepted Answer · 2017-05-27 17:10:06Z

7

From your code, you need to use component not directives.

Component is the only directive which accepts template as HTML.

Please check Types of directives

Hope it helps!!

answered May 27, 2017 at 17:10

Jayakrishnan

4,3043 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

max Over a year ago

Thanks for pointing out component. I changed to use component instead and it worked.

tomeks · Accepted Answer · 2017-05-27 17:11:15Z

According to Angular docs there are 2 types of directives: attribute and structural. None of them support templates. Just use angular Component. Is there some good reason that you want to use directive necessarily?

Thanks for pointing out component. I am pretty new to Angular 2. I changed to use component instead and it worked.

Collectives™ on Stack Overflow

How to use templateUrl in Angular 2 directive

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related