Angular Q&A: How do interpolation and expressions work in Angular?

Interpolation in Angular allows you to display a component property in the view (HTML) by wrapping it in double curly braces, such as {{ propertyName }}. This is a convenient way to display a property on the page without having to use a property binding.

Expressions in Angular are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} and allow you to insert dynamic values in the view. Expressions are evaluated by Angular and can be used to perform tasks such as arithmetic operations, assignments, and function calls.

Here's an example of using interpolation and expressions in Angular:

// component class
export class MyComponent {
  // property for interpolation
  public title = 'My Title';

  // method for expression
  public getFullName(firstName: string, lastName: string) {
    return firstName + ' ' + lastName;
  }
}

// component template (view)
<h1>{{ title }}</h1>
<p>Full name: {{ getFullName('John', 'Doe') }}</p>

In this example, the title property is displayed on the page using interpolation, and the getFullName() method is called using an expression to display the full name of a person.