Referencing angular styles documentation.
Utilizing Style URLs from metadata
You have the ability to incorporate styles from external CSS files by including a styleUrls
attribute in a component's @Component decorator:
@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 {
/* . . . */
}
The URL is regarded as relative to the application root, typically where the index.html web page that hosts the application is located. The
style file URL does not rely on the component file. Hence, the
example URL starts with src/app/. To specify a URL relative to the
component file, refer to Appendix 2.
It is also possible to embed tags within the component's HTML template.
Similar to styleUrls, the link tag's href URL is maintained relative to the
application root, not the component file.
@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>`
})
Incorporating CSS @imports
You can also import CSS files into other CSS files using the standard
CSS @import rule. For further information, refer to @import on the MDN site.
In this scenario, the URL is based on the CSS file you are importing into.
@import 'hero-details-box.css';
If necessary, adjusting encapsulation may be required for your purpose. Here's an explanation on it. Check out Load external css style into Angular 2 Component for insights. It offers a solution for integrating an external CDN, but I aim to provide comprehensive details and reasons why it is essential. Rest assured, this method addresses your specific case.
Additionally, there are suggestions above that assist in adding script tags. My recommendation is to directly add it to your component template, ensuring that what is unique to your component is included directly in the html.