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.

Answer 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).

Answer 2

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