# Aurelia Syntax inject Styles

**URL:** <https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415>\
**Category:** Best Practices\
**Created:** [November 20, 2017, 3:59pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415 "2017-11-20T15:59:03Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 20, 2017, 3:59pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/1 "2017-11-20T15:59:03Z")

</div>

I’ve noticed for some time now 2 different types of `inject` declarations.

Most common method

```auto
import { inject } from 'aurelia-framework';
import { Foo } from 'my-other-class';

@inject(Foo)
export class MyClass {
    constructor(foo) {
         this.foo = foo;
    }
}

```

Older method

```auto
import { Foo } from 'my-other-class';

export class MyClass {
    static inject = [Foo];
    constructor(foo) {
         this.foo = foo;
    }
}

```

I believe the older method is probably just a pre babel decorator support way of DI. Is there any advantages to using this over the decorator method? I ask since I still see some post snippets using this method still and wondered if this is just due to that being what one is used to or because there’s some advantage. I’ve also noticed a few snippets in posts using `@useView` when there didn’t appear any need since the view had the same name and location of the viewmodel.

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 20, 2017, 7:19pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/2 "2017-11-20T19:19:59Z")

</div>

I prefer the static member since it is more clean and I don’t have to import anything.  
As well decorators are as far as I know not anymore in the ECMAScript standard. So without babel this won’t work as well. Also I think a static member is more readable.

But this is just my opinion 🙂

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 20, 2017, 8:13pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/3 "2017-11-20T20:13:09Z")

</div>

With regards to useview its useful when you create reusable components, eg Plugins. The reason is that the consumers might override the default convention and with the decorator you make sure that the proper template is still found

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [November 20, 2017, 8:19pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/4 "2017-11-20T20:19:36Z")

</div>

What you prefer more in TS?

- autoinject  
or
- inject

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 20, 2017, 8:23pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/5 "2017-11-20T20:23:06Z")

</div>

Autoinject all the things + custom resolvers for weird Edge cases (eg requiring electron backend code in Aurelia renderer)

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 21, 2017, 12:09am UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/6 "2017-11-21T00:09:46Z")

</div>

`@autoinject` for everything except when I’m injecting `Element` in Typescript and have to use `@inject`.

Is there another way?

> <https://github.com/aurelia/dependency-injection/issues/97>

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 21, 2017, 2:01pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/7 "2017-11-21T14:01:29Z")

</div>

Thanks @fragsalat, that’s what I was looking for. I didn’t know that it was pulled out of the next version. Perhaps it will be pulled back in the one after that. I personally like using them, not just for inject. I did read where they are looking to do releases every year?? I’m all for new and cool stuff but that might get a little crazy for developers to maintain, which ones we can use and can’t, whether you have the right babel version, etc.

---

<div class="post-metadata">

**Author:** ![boban.r](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/boban.r/32/336_2.png) [@boban.r](https://discourse.aurelia.io/u/boban.r)\
**Post date:** [November 22, 2017, 9:59am UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/8 "2017-11-22T09:59:49Z")

</div>

If you want to use the `@autoinject` with DOM.Element in Typescript, follow the example bellow:

`@autoinject`  
`export class MyClass {`  
`constructor(private element: Element) {}`  
`}`

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 22, 2017, 4:20pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/9 "2017-11-22T16:20:04Z")

</div>

That didn’t work in TypeScript last time I checked.

See [this comment](https://github.com/aurelia/dependency-injection/issues/97#issuecomment-234627582).

---

<div class="post-metadata">

**Author:** ![boban.r](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/boban.r/32/336_2.png) [@boban.r](https://discourse.aurelia.io/u/boban.r)\
**Post date:** [November 22, 2017, 5:27pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/10 "2017-11-22T17:27:00Z")

</div>

I’m using it on my current project.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 22, 2017, 7:14pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/11 "2017-11-22T19:14:11Z")

</div>

@timfish If you’re using webpack make sure to

`import {DOM} from "aurelia-pal"`

and inject `DOM.Element` instead

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 22, 2017, 7:52pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/12 "2017-11-22T19:52:47Z")

</div>

I’m using systemjs/jspm and started the project over a year ago. When I tried @autoinject months ago it wasn’t working. Typescript and Aurelia have seen quite a few updates since then so I’ll have to have to test it.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 7, 2019, 3:03pm UTC](https://discourse.aurelia.io/t/aurelia-syntax-inject-styles/415/13 "2019-11-07T15:03:16Z")

</div>

> [@fragsalat](#):
>
> decorators are as far as I know not anymore in the ECMAScript standard

Just wanted to update this older post for future readers that decorators are a part of the proposed spec as of Feb '19. I still prefer using the @inject decorator as it’s a bit cleaner IMHO. One of the major advantages using aurelia over other frameworks is the convention or configuration and after using it now for almost 5 years, I can say it’s certainly lived up to it’s name. I also like the fact that if you need to configure for special cases such as dynamically changing out your view in components, you can do so.