Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the component template in angular" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use the component template in angular" article can help you solve the problem.

Angular is a framework for building client applications using HTML, CSS, and TypeScript to build single-page applications.

Angular is a heavyweight framework, which integrates a large number of out-of-the-box functional modules.

Angular is designed for large-scale application development, providing a clean and loosely coupled code organization, making applications neat and easier to maintain.

Component template

1. Data binding

Data binding is to display the data in the component class in the component template, and when the data in the component class changes, it will be automatically synchronized to the component template (data-driven DOM).

Use interpolation expressions for data binding in Angular, that is, {{}}.

{{message}} {{getInfo ()}} {{a = = b? 'equal': 'unequal'} {{'Hello Angular'}}

2. Attribute binding

2.1 General Properties

Property binding is divided into two cases, binding DOM object properties and binding HTML tag attributes.

Use [attribute name] to bind DOM object attributes to the element.

Use [attr. Attribute name] binds HTML tag attributes to the element

In most cases, the DOM object attribute and the HTML tag attribute correspond to each other, so use the first case.

However, some attributes exist only in the HTML tag, but not in the DOM object, so you need to use the second case, such as the colspan attribute, which is not available in the DOM object.

Or you need to use the second case to customize the HTML property.

2.2 class Properties

Button

2.3 style attribut

Button button

3. Event binding

Button export class AppComponent {title = "test" onSave (event: Event) {/ / this points to the instance object of the component class this.title / / "test"}}

4. Get the native DOM object

4.1 get from the component template

4.2 get from the component class

Use the ViewChild decorator to get an element

Home works!

Import {AfterViewInit, ElementRef, ViewChild} from "@ angular/core" export class HomeComponent implements AfterViewInit {@ ViewChild ("paragraph") paragraph: ElementRef | undefined ngAfterViewInit () {console.log (this.paragraph?.nativeElement)}}

Use ViewChildren to get a set of elements

A b cimport {AfterViewInit, QueryList, ViewChildren} from "@ angular/core" @ Component ({selector: "app-home", templateUrl: ". / home.component.html", styles: []}) export class HomeComponent implements AfterViewInit {@ ViewChildren ("items") items: QueryList | undefined ngAfterViewInit () {console.log (this.items?.toArray ())}}

5. Bidirectional data binding

Data is synchronized in both the component class and the component template.

Angular puts bidirectional data binding functionality in the @ angular/forms module, so you need to rely on this module to implement bidirectional data binding.

Import {FormsModule} from "@ angular/forms" @ NgModule ({imports: [FormsModule],}) export class AppModule {} change usernameusername: {{username}} export class AppComponent {username: string = "" change () {this.username = "hello Angular"}} in the component class

6. Content projection

Heading Body

If there is only one ng-content, the select attribute is not required.

Ng-content will be replaced in the browser, and if you don't want this extra div, you can use ng-container instead of this div.

Ng-content is usually used in projection: when the parent component needs to project data to the child component, it must specify where to project the data to the child component. At this time, you can use the ng-content tag to make a placeholder, which will not produce the real dom element, but will only copy the projected content.

Ng-container is a special container tag that does not produce real dom elements, so it is not valid to add attributes to the ng-container tag.

Heading Body

7. Data binding fault-tolerant processing

/ / app.component.tsexport class AppComponent {task = {person: {name: 'Zhang San'}} {{task.person.name}} {{task.person?.name}}

8. Global style

/ * the first way is in styles.css file * / @ import "~ bootstrap/dist/css/bootstrap.css"; / * ~ relative node _ modules folder * / / the third way is "styles" in angular.json file: [. / node_modules/bootstrap/dist/css/bootstrap.min.css "," src/styles.css "about" how to use component templates in angular ". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.