Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to operate DOM elements in Angular". In daily operation, I believe many people have doubts about how to operate DOM elements in Angular. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to operate DOM elements in Angular". Next, please follow the editor to study!

To get DOM elements in angular, you can use javascript's native API, or introduce jQuery to manipulate DOM through jquery objects, but angular has provided us with the corresponding API (ElementRef) to get DOM elements, so there is no need to use native API or jQuery. [recommended for related tutorials: "angular tutorial"]

ElementRef gets the DOM element

1. Create a TestComponent component with the following template: test.component.html

Hello

World title component

2. Write test.component.ts files

Import {Component, OnInit} from'@ angular/core';// 1, import ElementRef class import {ElementRef} from'@ angular/core' Import {PassBadge} from'. / compoment/pass-badge/pass-badge.component'@Component ({selector: 'app-test', templateUrl:'. / test.component.html', styleUrls: ['. / test.component.css'] Declarations: [PassBadge]}) export class TestComponent implements OnInit {/ / 2, inject ElementRef classes into test components constructor (private el:ElementRef) {} ngOnInit () {/ / 3, get DOM elements console.log (this.el.nativeElement) console.log (this.el.nativeElement.querySelector ('# component'))}}

Let's see what this.el.nativeElement is.

So you can manipulate the corresponding DOM element through this.el.nativeElement.querySelector ('# component'). For example, you can change the color of the text.

This.el.nativeElement.querySelector ('# component') .style.color = 'lightblue' template variable to get the DOM element

Components can be obtained through ViewChild, as well as ContentChild,ViewChildren and ContentChildren

1. Modify the TestComponent component to add a template variable to the corresponding element, as follows

Hello

World title component

2. Modify the test.component.ts as follows:

Import {Component, OnInit} from'@ angular/core';import {ElementRef} from'@ angular/core';// 2, introduce ViewChildimport {ViewChild} from'@ angular/core'@Component ({selector: 'app-test', templateUrl:'. / test.component.html', styleUrls: ['. / test.component.css']}) export class TestComponent implements OnInit {constructor (private el:ElementRef) {} / 3, get the element @ ViewChild ('component') dom: any @ ViewChild ('div') div: any; ngOnInit () {console.log (this.dom) / / PassBadgeComponent this.dom.fn () / / call the fn method console.log (this.div) / / ElementRef this.div.nativeElement.style.color =' lightblue' / / text color modified to light blue}} of the passbadge component

The final result is as follows

From the result, we can know that when you use the ViewChild template variable to get the component element, you get the component class exported by the component (PassBadgeComponent in the example above), and you can only manipulate the properties contained in the component.

When you use the ViewChild template variable to get the html element, you can get a class of type ElementRef. In this case, you can manipulate the element through native API such as this.div.nativeElement.querySelector ('span')

At this point, the study on "how to manipulate DOM elements in Angular" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.