Is it possible to work with the DOM directly using Angular?

Question

Angular

Is it possible to work with the DOM directly using Angular?
Let's say I want to click on a button and then add something to the DOM myself.
How can I do this in a component?
If so, please give a very simple example.

Answer 1

It is possible, but not necessary. It will backfire if you then screw SSR or WebWorker. Use Renderer2 instead

Answer 2

That is unnecessary. If you want to add, for example, an element to an array on the click of a button, then just add it. Angular will do everything for you. This is the whole point of frameworks. They let you think about the business logic, not the implementation details.

<div *ngFor="let item of items"> {{ item }} </div>
  <button (click)="addItem()">Add</button>

items = [1, 2, 3, 4];
  addItem(): void {
    this.items.push(5);
  }