Dom Manipulate in angular

<h2 #hello1>Hello world</h2>
<button (click)="handleFunction()">Change Text</button>

  @ViewChild('hello1', { static: true }) helloElement: ElementRef;

  handleFunction() {
    this.helloElement.nativeElement.textContent = 'Hello Angular!';
    this.helloElement.nativeElement.style.color = 'red';
    this.helloElement.nativeElement.style.backgroundColor = 'yellow';
    this.helloElement.nativeElement.style.fontSize = '30px';
  }

Top comments (1)

NicolaBelliardi • Jul 8

In Angular, direct DOM manipulation is generally discouraged because Angular's data binding and encapsulation mechanisms provide safer and more efficient ways to update the view. However, there are situations where you might need to manipulate the DOM directly. To do this, you can use Angular's Renderer2 service, which provides methods to safely interact with the DOM while maintaining compatibility with Angular's change detection and rendering processes.

If you are looking for Angular development for your project, hire from Soft Suave. Our experienced developers provide top-quality solutions tailored to your needs, ensuring efficient and effective results.