We can load styles from external CSS files by adding a styleUrls
attribute into a component's @Component
decorator:javascript
@Component({ selector: 'hero-details', template: ` <h2>{{hero.name}}</h2> <hero-team [hero]=hero></hero-team> <ng-content></ng-content> `, styleUrls: ['app/hero-details.component.css'] }) export class HeroDetailsComponent { /* . . . */ }
2.Users of module bundlers like Webpack may also use the styles
attribute to load styles from external files at build time. They could write:css
styles: [require('my.component.css')]
We set the styles
property, not styleUrls
property! The module bundler is loading the CSS strings, not Angular. Angular only sees the CSS strings after the bundler loads them. To Angular it is as if we wrote the styles
array by hand. Refer to the module bundler's documentation for information on loading CSS in this manner.java
3.Template Link Tagsapp
We can also embed <link>
tags into the component's HTML template.ui
As with styleUrls
, the link tag's href
URL is relative to the application root, not relative to the component file.this
@Component({ selector: 'hero-team', template: ` <link rel="stylesheet" href="app/hero-team.component.css"> <h3>Team</h3> <ul> <li *ngFor="let member of hero.team"> {{member}} </li> </ul>` })
4.CSS @importscode
We can also import CSS files into our CSS files by using the standard CSS @import
rule.component
In this case the URL is relative to the CSS file into which we are importing.orm
@import 'hero-details-box.css';