DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

Dom Manipulate in angular

<h2 #hello1>Hello world</h2>
<button (click)="handleFunction()">Change Text</button>
Enter fullscreen mode Exit fullscreen mode
  @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';
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
nicolabelliardi profile image
NicolaBelliardi

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.