A brief analysis of component templates in angular

This article will take you through the component templates inangularand briefly introduce the relevant knowledge points: data binding, property binding, event binding, two-way data binding, content projection, etc. ,I hope to be helpful!

Angular is aclient## built usingHTML,CSS,TypeScript#A framework for buildingsingle-pageapplications. [Related tutorial recommendations: "angular tutorial"]

heavyweightframework that integrates a large number ofout-of-the-boxfunction module.

• Angular: https://angular.io/

• Angular Chinese: https:// angular.cn/

• Angular CLI: https://cli.angular.io/

Angular CLI Chinese: https://angular.cn/ cli

Component template

1. Data binding

interpolation expressionfor data binding in Angular, that is,{{ }}.

{{message}}
 
{{getInfo()}}
 
{{a == b ? '相等': '不等'}}
 
{{'Hello Angular'}}
 
 

2. Attribute binding

2.1 Common attributes

binds DOM object attributesandbinds HTML tag attributes.

• Use

  [property name]to bind DOM object properties to elements.

  Copy after login

• Use

  [attr.attribute name]Bind HTML tag attributes to elements

  Copy after login

only exist in HTML tagsand do not exist in the DOM object. In this case, you need to use the second case, such as thecolspanattribute, in the DOM object Just not.

2.2 class attribute

按钮 

2.3 style attribute

按钮 按钮

3. Event binding

按钮  

export class AppComponent { title = "test" onSave(event: Event) { // this 指向组件类的实例对象 this.title // "test" } }

4. Get the native DOM object

4.1 Get## in the component template #

Use

decorator to get an element in the component class

<p #paragraph>home works!</p>

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

Get a set of elements

<ul> <li #items>a</li> <li #items>b</li> <li #items>c</li> </ul>

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

5. Two-way data bindingData is synchronized in both directions in the component class and component template.

Angular places the two-way data binding function in the

module, so to implement two-way data binding you need to rely on this module.

import { FormsModule } from "@angular/forms" @NgModule({ imports: [FormsModule], }) export class AppModule {}

<input type="text" [(ngModel)]="username" /> <button (click)="change()">在组件类中更改 username</button> <div>username: {{ username }}</div>

export class AppComponent { username: string = "" change() { this.username = "hello Angular" } }

6. Content projection

  
 Heading 
 
 Body 
 

ng-content will be replaced by

in the browser. If you don't want this extra div, you can use ng -container replaces this div.

• ng-container is a special container tag that does not generate real dom elements, so adding attributes to the ng-container tag is invalid.

•    Heading   Body  

  Copy after login

7. Data binding fault tolerance processing

// app.component.ts export class AppComponent { task = { person: { name: '张三' } } }

 {{ task.person.name }}  {{ task.person?.name }}

8. Global style

/* 第一种方式 在 styles.css 文件中 */ @import "~bootstrap/dist/css/bootstrap.css"; /* ~ 相对node_modules文件夹 */

// 第三种方式 在 angular.json 文件中 "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ]