Question: If my component needs an extra style sheet from somewhere else, how do I use the absolute path to get to it?

```
@Component({
    styleUrls: ['absolute_path/another.css']
})

```

I know I can do absolute path with `import` like below as long as I set up `@app` in the config:

```
import { something } from '@app/something'

```

Is there a way to achieve the same/similar thing with the `styleUrls`? The reason is that if my component is too deep in the project tree, the relative path will end up with too many dots, eg:

```
styleUrls: ['../../../../css/another.css']

```

Answer: 
You can set the class using [[ngClass]](https://angular.io/api/common/NgClass) like this:

```
<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass">
...
</div>

```

Then in your ts file:

```
htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';

```

Finally, if you want to set the styles dynamically, you can use [[ngStyle]](https://angular.io/api/common/NgStyle) like this:

```
<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass" [ngStyle]="dynamicStyle">
...
</div>

```

Then in your ts file:

```
htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';
dynamicStyle: string = {
    'color': 'red'
  }

```

If you want to use a parameter or variable to set a style property you can do this:

```
setCustomColor(color: string): {
      dynamicStyle: string = {
        'color': `${color}`
      }
}

```
you can add this to your component and add any styles you want in your scss file

```
@Component({   ...   encapsulation: ViewEncapsulation.None, })

```