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'.

Answer 1

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!!

Answer 2

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?