Angular Basic Syntax

1. Component templates

1.1 Data Binding

Data binding is the display of data from a component class in a component template that is automatically synchronized to the component template when the data in the component class changes (data-driven DOM).

Angular uses difference expressions for data binding, the {{}} beard syntax.

<h2>{{ message }}</h2>
<h2>{{ getInfo() }}</h2>
<h2>{{ a == b ? 'equal' : 'unequal'}}</h2>
<h2>{{ 'Hello Angular' }}</h2>
<p [innerHTML] ="htmlSnippet"></p> <! -- Escape code in data -->
Copy the code

1.2 Attribute Binding

1.2.1 Common Attributes

Property binding can be divided into two types: binding DOM object properties and binding HTML tag properties.

1. Use [Attribute Name] to bind DOM object attributes to elements

   <img [src] ="imgUrl" />
   Copy the code

2. Bind HTML tag attributes to elements using [attr. Attribute Name]

   <td [attr.colspan] ="colSpan"></td> 
   Copy the code

   In most cases, DOM object attributes and HTML tag attributes correspond, so use the first case. However, the second case is required for attributes that only exist in HTML tags but not in DOM objects, such as the ColSPAN attribute, which does not exist in DOM objects, or for custom HTML attributes

1.2.2 class attribute

<button class="btn btn-primary" [class.active] ="isActive">button</button>
<div [ngClass] ="{'active': true, 'error': true}"></div>
Copy the code

1.2.3 styleattribute

<button [style.backgroundColor] ="isActive ? 'blue': 'red'">button</button>
<button [ngStyle] ="{'backgroundColor': 'red'}">button</button>
Copy the code

1.3 Event Binding

<button (click) ="onSave($event)">button</button>
<! -- Execute function when press enter to lift -->
<input type="text" (keyup.enter) ="onKeyUp()"/>
Copy the code

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // This points to an instance object of the component class
    console.log(this.title) // "test"}}Copy the code

1.4 the use ofTemplate reference variableAccess to the nativeDOMobject

1.4.1 It can be obtained from component Templates

<input type="text" (keyup.enter) ="onKeyUp(username.value)" #username/>
Copy the code

1.4.2 Obtained from the Component Class

Get an element using the ViewChild decorator

<p #paragraph>home works!</p>
Copy the code

import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"

export class HomeComponent implements AfterViewInit {
  @ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit() {
    console.log(this.paragraph? .nativeElement) } }Copy the code

Use ViewChildren to get a set of elements

<ul>
  <li #items>a</li>
  <li #items>b</li>
  <li #items>c</li>
</ul>
Copy the code

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()) } }Copy the code

1.5 Bidirectional data binding

Data is synchronized bidirectionally in component classes and component templates.

Angular puts bidirectional data binding in the @Angular/Forms module, so you rely on that module to implement bidirectional data binding.

import { FormsModule } from "@angular/forms"

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}
Copy the code

<input type="text" [(ngModel)] ="username" />
<button (click) ="change()">Change username in the component class</button>
<div>username: {{ username }}</div>
Copy the code

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

1.6 Content Projection

<! -- app.component.html -->
<bootstrap-panel>
  <div class="heading">Heading</div>
  <div class="body">Body</div>
</bootstrap-panel>
Copy the code

<! -- panel.component.html -->
<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>
Copy the code

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

Ng-content is replaced by

in the browser. If you don’t want the extra div, you can use ng-container instead.

<! -- app.component.html -->
<bootstrap-panel>
  <ng-container class="heading">Heading</ng-container>
  <ng-container class="body">Body</ng-container>
</bootstrap-panel>
Copy the code

1.7 Data binding fault tolerance processing

// app.component.ts
export class AppComponent {
  task = {
      person: {
        name: 'Joe'}}}Copy the code

<! -- Way 1 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<! -- Mode two -->
<span>{{ task.person? .name }}</span>
Copy the code

1.8 Global Styles

/* The first way is in the styles.css file */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ relative to node_modules folder */
Copy the code

<! -- The second way is in the index.html file -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Copy the code

// The third way is in the angular.json file
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css"."src/styles.css"
]
Copy the code