1. You canApp.component.tsIn the file

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

If you delete the templateUrl and styleUrls below, you can delete the corresponding files. If you do not delete these two sentences, you will get an error when deleting the files.
Become:

@Component({
  selector: 'app-root'
})

2. At this point, however, the browser shows a blank space and nothing.At this time you can:

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
})
export class AppComponent {
  title = 'hello world';
  hero = 'Windstorm';
}

Notice that a template has been added and the browser will display it.
Note at this point that the relationship between {{hero}} and hero ='Windstorm', as defined below, is self-explanatory.

Here the double braces are the interpolation expression binding method in Angular.They indicate that the values of the title and hero attributes of the component are inserted as strings in the middle of the HTML tag.

3. Start adding classes:

import { Component } from '@angular/core';

export class Hero {//1. Add a class like this, note how the class is written
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `//3. Modify the template so that when you use it, you also put a dot in parentheses
})

export class AppComponent {
  title = 'hello world';
  hero: Hero = {//2. Change the previous string to an object using the classes defined above
    id: 1,
    name: 'Windstorm'
  };
}

The example above is the use of objects and classes.

4. Binding in both directions:
Modify the template to look like this:

template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
  </div>
  `

[(ngModel)] is an Angular syntax that uses andHero.nameBind to the input box.Its data flow is bidirectional: from attributes to input boxes, and from input boxes to attributes.

However, compilation errors occur because we do not include the FormsModule module.

5. How to introduce the FormsModule module?
openApp.module.tsFile.This file is the introduction of modules, just like the introduction of header files.
Modify the file to:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 1. Add a new header file <-- NgModel lives here

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // 2. Introduce this module <--import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

6. After the modification, you can enter text in the input box and find that the web page will change with the text in the input box.In fact, at this time you can also modify the object's name in the program to be test, you will find that the text of the input box also changes, understand what two-way binding means?