Angular - 1.5 Edit first application part 2

In the previous video we discovered the structure of an Angular application and noticed a strange element that was not HTML: {{ title }}. In this lesson we explore where this expression comes from and what we can do with it. The App component is composed of three sibling files inside the same folder: app.component.html, app.component.css and app.component.ts. They all sit together because they describe the same component.

If we open the TypeScript file we see a class AppComponent exposing a property title = 'my-dream-app'. The HTML template prints "Welcome to {{ title }}!", and indeed the browser shows "Welcome to my-dream-app!". So when we use {{ title }} in the template, Angular is reading the public property of the TypeScript class. Changing the value to "my-app" and saving updates the page instantly. This mechanism is called string interpolation, the simplest form of data binding.

From one-way to two-way binding

  • Interpolation: {{ name }} displays a property in HTML.
  • Property binding: [value]="name" binds a property to an HTML attribute, no curly braces needed.
  • Two-way binding: [(ngModel)]="name" synchronises an input field and the class property in both directions.

To experiment we add a new public property name = 'Gandalf' on the class and render <p>{{ name }}</p>. To go further we add an input field with the ngModel directive: <input type="text" [(ngModel)]="name">. Initially Angular shows an error saying that ngModel is unknown. The reason is that the FormsModule is not yet imported.

To enable the directive we open app.module.ts and add import { FormsModule } from '@angular/forms';, then add FormsModule to the imports array of the module. Because the module changed during compilation, we restart the dev server. The input now shows "Gandalf", and the paragraph below mirrors any text we type. Both the TypeScript side and the template side can drive the value, which is the essence of two-way binding. In this video we covered data binding, one-way binding and two-way binding; we will dive deeper in the next lessons.

Summary

This lesson continues exploring the Angular application structure by investigating how TypeScript component properties bind to HTML templates. You learn to modify application values dynamically and understand two key data binding patterns: one-way binding (reading property values in HTML) and two-way binding (modifying values both from TypeScript and HTML). The lesson demonstrates importing Angular modules like FormsModule to enable directives such as ng-model.

Key points

  • Component files work together: a TypeScript file contains properties that can be exposed in the corresponding HTML template through public access
  • One-way data binding uses double curly braces (interpolation) to display TypeScript property values in HTML (e.g., {{title}})
  • Two-way data binding uses the ng-model directive to sync values between HTML input fields and TypeScript component properties, requiring FormsModule to be imported
  • Angular organizes functionality through modules: even though features like ng-model are part of the framework, you must explicitly import and declare required modules in app.module.ts
  • The application server may need to be restarted after adding new module imports for changes to take effect properly
  • Binding syntax differs based on context: double braces for interpolation in elements, but property binding in attributes uses bracket notation without the braces

FAQ

What is the difference between one-way and two-way data binding in Angular?

One-way binding allows you to display TypeScript property values in HTML using interpolation ({{propertyName}}), but changes in HTML do not affect the TypeScript property. Two-way binding with ng-model creates a bidirectional link—changes in the HTML input field automatically update the TypeScript property and vice versa.

Why does the ng-model directive fail to work initially?

The ng-model directive requires the FormsModule to be imported in your app.module.ts file. Even though ng-model is part of the Angular framework, you must explicitly declare which modules your application uses. The error occurs because the module was not imported, and you must restart the development server after importing it.

How do you call a TypeScript component property from the HTML template?

Use double curly braces to call a public TypeScript property in HTML: {{propertyName}}. The property must be declared as public in the TypeScript component class for it to be accessible in the template.