How to Add Full HTML, CSS, and JS in Angular 2

Question

So, i develop web app using Angular 7, one of the component however is using complex styling from old project, so i plan to just paste static HTML, CSS, and JS from static old project to one of the Angular component, how to do it?

i.e, I want to paste following HTML structure in Angular component:

<html>
<head>
   ...
   ...
   <link rel="stylesheets"..
   <link rel="stylesheets"..
   <link rel="stylesheets"..
</head>
<body>
   ...
   ...
   ...
   <script src="...
</body>
</html>

Notice that i need to use CSS and Script on that static page and only contained in single Angular component, i'm aware of declaring global CSS and JS that we need for our project in angular.json, however in this case i dont need global CSS or global JS, only contained on that one component, so, how to do it?

@Component({ selector: 'my-cmp', templateUrl: 'map.component.html', styleUrls: ['map.component.css', 'yourCustomStyle1.scss',........]}) — Jacopo Sciampi
– Jacopo Sciampi, Commented Jan 14, 2019 at 16:26
for the scripts it depends on what they do. IE: you shouldn't use JS/jQuery/etc to modify angular's html since it use it's own. So it's kinda hard to give you a quite good answer for that. — Jacopo Sciampi
– Jacopo Sciampi, Commented Jan 14, 2019 at 16:27

Andre F · Accepted Answer · 2019-01-14 16:08:19Z

1

If you only want certain styles contained in a single Angular component then you can define then with inline styles on your template.

1) Wrap styles with style tag:

@Component({
  template: `
    <style>
    h1 {
      color: blue;
    }
    </style>
    <h1>This is a title.</h1>
    `
})

2) Normal inline styles in the template tags:

@Component({
  template: '<h1 style="color:blue">This is a title.</h1>'
})

You can also include the script tags in your template to import a JS file whenever you're using this component.

3) Alternatively you can import the CSS files by using @import in your CSS file for the component:

@Component({
  template: '<h1>This is a title.</h1>',
  style: '@import url("custom.css");'
})

edited Jan 14, 2019 at 16:08

answered Jan 14, 2019 at 15:57

Andre F

5321 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

xcode Over a year ago

it's not possible, there are more than 15 CSS files and JS to be included for just that one single HTML file

Sebastian Oleński Over a year ago

if you put the styles like that they will affect every child component of the used component. Just put it in the component's css file so Angular can give them a selector.

xcode Over a year ago

@SebOlens what do you mean?

Andre F Over a year ago

@.xcode if you have that many files then why not using the @import on the css file for your component?

xcode Over a year ago

how about JS inside <script> tag? the JS files mostly from third party libraries like jquery etc.

|

Collectives™ on Stack Overflow

How to Add Full HTML, CSS, and JS in Angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related