CODEWITHSUNDEEP
javascripthtmlcssangular
xcode
xcode

Reputation: 1717

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

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?

Upvotes: 1

Views: 1245

Answers (1)

Andre F
Andre F

Reputation: 534

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");'
})

Upvotes: 1

Related Questions