Simulate xss in angular

I am trying to simulate very simple xss in angular but I cant is there any reason why it does not work?
TS

showOutput() {
  let badOutput = document.getElementById('bad-output');
  const badInput = document.getElementById('bad-input') as HTMLInputElement;
  if (badOutput && badInput) {
    badOutput.innerHTML = badInput.value;
  }
}

HTML

<input type="text" id="bad-input" name="bad-input" />
<button id="show-output" (click)="showOutput()">Show output</button>
<br />
<p id="bad-output"></p>

INPUT

<script>alert('xss')</alert>

First you have a mistake in your closing tag; you wrote </alert> while it should be </script>. But even when you change this nothing will happen. The reason why it won't work can be found here on MDN:

Although this may look like a cross-site scripting attack, the result is harmless. HTML specifies that a <script> tag inserted with innerHTML should not execute.

There you also find another example that will execute a malicious script:

<img src='x' onerror='alert(1)'>

If you try that input in your example you see it will actually alert.

You can test it here in this StackBlitz based on your code example.