# Syntax error: Custom directive

**URL:** <https://forum.ionicframework.com/t/syntax-error-custom-directive/54333>\
**Category:** ionic-v3\
**Created:** [June 9, 2016, 8:42am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333 "2016-06-09T08:42:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![odorakel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/odorakel/32/101000_2.png) [@odorakel](https://forum.ionicframework.com/u/odorakel)\
**Post date:** [June 9, 2016, 8:42am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/1 "2016-06-09T08:42:30Z")

</div>

Hey folks,

I was trying to include a directive that I found online - only for testing, but I keep getting an syntax error ☹

```
import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {
    private el: HTMLElement;

    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

```

The output at the console is the following:

> SyntaxError: /home/myTutorial/app/directives/highlight.js: Unexpected token (5:12) while parsing file: /home/myTutorial/app/directives/highlight.js

Does someone know, how to fix this error?

Thanks,  
Oliver

---

<div class="post-metadata">

**Author:** ![xr0master](https://avatars.discourse-cdn.com/v4/letter/x/b4bc9f/32.png) [@xr0master](https://forum.ionicframework.com/u/xr0master)\
**Post date:** [June 9, 2016, 8:45am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/2 "2016-06-09T08:45:15Z")

</div>

You use typescript syntax in js.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 9, 2016, 8:46am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/3 "2016-06-09T08:46:29Z")

</div>

You are feeding TypeScript to a JavaScript project. I strongly recommend making a TypeScript project, but if you insist on using JavaScript, you must figure out how to manually translate your TypeScript sample code.

---

<div class="post-metadata">

**Author:** ![odorakel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/odorakel/32/101000_2.png) [@odorakel](https://forum.ionicframework.com/u/odorakel)\
**Post date:** [June 9, 2016, 8:58am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/4 "2016-06-09T08:58:00Z")

</div>

I’m pretty new to Angular2 - how can I convert it?

---

<div class="post-metadata">

**Author:** ![xr0master](https://avatars.discourse-cdn.com/v4/letter/x/b4bc9f/32.png) [@xr0master](https://forum.ionicframework.com/u/xr0master)\
**Post date:** [June 9, 2016, 9:04am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/5 "2016-06-09T09:04:49Z")

</div>

First: try rename highlight.js to highlight.ts  
If it doesn’t help, than you need create TS project. You could read about it in documentation.

---

<div class="post-metadata">

**Author:** ![vijquick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vijquick/32/103086_2.png) [@vijquick](https://forum.ionicframework.com/u/vijquick)\
**Post date:** [June 9, 2016, 9:05am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/6 "2016-06-09T09:05:21Z")

</div>

Hello @odorakel

If you are very new and starting to learn, I would strongly recommend to work with **[typescript](https://www.typescriptlang.org/)** directly instead of **ES5** or **ES6**. Most of the samples you see in web and in official [angular 2 website](https://angular.io/), mostly it will be **typescript**.

Regards  
Vijay

---

<div class="post-metadata">

**Author:** ![odorakel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/odorakel/32/101000_2.png) [@odorakel](https://forum.ionicframework.com/u/odorakel)\
**Post date:** [June 9, 2016, 9:40am UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/7 "2016-06-09T09:40:27Z")

</div>

Ok, thanks for the advice - I do created now a Typescript Ionic2 project.

But I also have a “normal” one with javascript and I was trying to get this working, but it won’t work for some reason. I wanted to test this tutorial directive called “Elastic header”.

[http://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/](http://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [June 10, 2016, 3:21pm UTC](https://forum.ionicframework.com/t/syntax-error-custom-directive/54333/8 "2016-06-10T15:21:03Z")

</div>

Just to add a bit more to this, if you wanted, you could have done the following

```auto
import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {
   static get parameters(){
    return [[ElementRef]];
  }

    constructor(el) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

```

This will make sure everything is done correctly and won’t give you any syntax errors.