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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay