Angular 7 Component template to include Javascript

Question

I have the following code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dinner',
  template: '<h2>Test</h2> <script>alert("Test");</script>',
  //templateUrl: './dinner.component.html',
  styleUrls: ['./dinner.component.css']
})
export class DinnerComponent implements OnInit {

   status = true;

  constructor() { }

  ngOnInit() {
    this.status = true;
  }

}

When the page is loaded, the javascript tags were stripped off, resulting in only:

<h2 _ngcontent-c2="">Test</h2>

In the source code.

I presume this is because for security / architecture reasons (Edit: Yes it is: https://angular.io/guide/security). However, for my purpose, is there any way I can configure Angular 7 to not strip off the Javascript tags?

The above is an abstract of the problem that I am facing trying to do this: https://stackoverflow.com/a/42562462/4762482

I realised the segment here:

const compMetadata = new Component({
            selector: 'dynamic-html',
            template: this.html,
          });

Results in a new Component created with all ng and script tags stripped off.

[Final Edit] - I decided this question is no longer relevant as I believe any (hacky) solution will likely break a few OWASP recommendations and violate the principles of Angular 7's architecture.

MapLion · Accepted Answer · 2019-01-28 03:34:29Z

1

You are correct in your "Final Edit", but you can load any javascript tags you want in the index.html (or whatever your root html is); you just can't do it in individual components (and really, you shouldn't need to).

answered Jan 28, 2019 at 3:34

MapLion

1,1411 gold badge15 silver badges38 bronze badges

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

Comments

Bhargav Rao · Accepted Answer · 2019-01-24 02:44:07Z

0

You can include any js you want to trigger on the component load inside the ngOnInit

edited Jan 24, 2019 at 2:44

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Jan 24, 2019 at 0:56

Web Nexus

1,14811 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular 7 Component template to include Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related