- Angular Tutorial
- Angular - Home
- Angular - Overview
- Angular - Features
- Angular - Advantages & Disadvantages
- Angular Basics
- Angular - Environment setup
- Angular - First Application
- Angular - MVC Architecture
- Angular Components
- Angular - Components
- Angular - Component Lifecycle
- Angular - View Encapsulation
- Angular - Component Interaction
- Angular - Component Styles
- Angular - Nested Components
- Angular - Content projection
- Angular - Dynamic components
- Angular - Elements
- Angular Templates
- Angular - Templates
- Angular - Template statements
- Angular - Template Variables
- Angular - SVG as Templates
- Angular Binding
- Angular - Data Binding
- Angular - Interpolation
- Angular - Event Binding
- Angular - Property Binding
- Angular - Attribute Binding
- Angular - Class Binding
- Angular - Style Binding
- Angular - Two-way Binding
- Angular Directives
- Angular - Directives
- Angular - Attribute Directives
- Angular - Structural Directives
- Angular - Custom Directives
- Angular Pipes
- Angular - Pipes
- Angular - Built-in Pipes
- Angular - Custom Pipes
- Angular Forms
- Angular - Forms
- Angular - Template Driven Forms
- Angular - Reactive Forms
- Angular - Form Validation
- Angular - Dynamic Forms
- Angular Dependency Injection
- Angular - Dependency Injection
- Angular - Injectable Service
- Angular Routing
- Angular - Routing
- Angular - Dynamic Routes
- Angular - Wildcard Routes
- Angular - Nested Routes
- Angular - Navigation
- Angular - Routing in SPA
- Angular - Custom Route Matches
- Angular - Router Reference
- Angular HTTP Client programming
- Angular - Services
- Angular - HTTP Client
- Angular - Request
- Angular - Response
- Angular - GET
- Angular - POST
- Angular - PUT
- Angular - DELETE
- Angular - JSONP
- Angular - CRUD Operations Using HTTP
- Angular Modules
- Angular - Introduction to Modules
- Angular - Root Module
- Angular - Feature Module
- Angular - Sharing Module
- Angular - Routing Module
- Angular - NgModules
- Angular Animation
- Angular - Animations
- Angular Service Workers & PWA
- Angular - Service Workers & PWA
- Angular Testing
- Angular - Testing Overview
- Angular Design Patterns
- Angular - Design Patterns
- Angular - Lazy Loading
- Angular - Singleton Pattern
- Angular - Observer Pattern
- Angular Libraries
- Angular - Libraries
- Angular - Angular Material
- Angular - PrimeNG
- Angular - RxJS
- Angular Advanced
- Angular - Signals
- Angular - Authentication & Authorization
- Angular - Internationalization
- Angular - Standalone Component
- Angular - Accessibility
- Angular - Web Workers
- Angular - Server Side Rendering
- Angular - Ivy Compiler
- Angular - Building with Bazel
- Angular - Backward Compatibility
- Angular - Reactive Programming
- Angular Tools
- Angular - CLI
- Angular Material UI Elements
- Angular - Paginator
- Angular - Datepicker
- Angular - Select Drop-down
- Angular Miscellaneous
- Angular - Third Party Controls
- Angular - Configuration
- Angular - Displaying Data
- Angular - Decorators & Metadata
- Angular - Basic Example
- Angular - Error Handling
- Angular - Testing & Building a Project
- Angular - Lifecycle Hooks
- Angular - User Input
- Angular - What's New?
- Angular Useful Resources
- Angular - Quick Guide
- Angular - Useful Resources
- Angular - Discussion
Angular - Text interpolation
Text interpolation is the process of using data of Angular component in its corresponding template using the template expression. It is used just to display a piece of information in HTML, such as displaying a title or name.
The component is a building block of an Angular application. It consists of a TypeScript class, an HTML template, and CSS styles. The template expression is a piece of code written within double curly braces {{ }} in the Template.
How to use Text Interpolation?
As discussed earlier, we write the template expression inside double curly braces to use Text Interpolation. It is shown below for the reference −
{{ }}
Let us consider that a component has name as one of its property.
export class HomeComponent {
name: string = 'John'
}
Now, name can be used in it's template as shown below −
Hello {{ name }}
Understanding Template Expression
Template expressions are same as that of JavaScript expression excluding two set of expression:
Expression with no usage in the template (assignement, object creation, etc.,)
Expressions with side effects
For example, the increment operator (++) basically increment the given variable and then returns the incremented value. This is called side effect. Since the increment operator produces the side effect, it is not allowed in the template expression.
Some of the JavaScript expressions not allowed in the template expression. They are given below:
Assignment operators: Template does not have the concept of creating a new variable and setting value for it in the context of template.
new keyword: Template does not allow the creation of new object. Any object should be created in the component class. Object created in the component will be available in the template.
typeof and instanceOf keyword: Template does not allow interpretation of the object in the template. Logic should be done in the component through public method and should exposed to the template.
Chaining expressions: Template expression allows only a single expression and so, all chaining operators are excluded.
increment and decrement operators: Template does not allow side effects. Since the increment and decrement operator does side effects, they are excluded.
Bitwise operator: Pipe symbol (|) is used to represent the angular pipe concept. Angular pipes are used for text transformation.
As template will render many times during the lifetime of the application, angular team recommends the expression to be short, quick and have no side effects.
Template Expression Context
Template expression has three context −
1. Component's property: Components property are the property set in the components instance. For example, a user object (user) in the component can be used in the template as follows,
{{ user.name }}
Here, user context is component's instance.
2. Template input variable: Template input variable are input to the template assigned through directives. For example, ngFor directive send the index and current item of the loop to the template as shown below,
- {{user.name}}
Here, user context is template input variable.
3. Template reference variable: Template reference variable is basically representation of HTML elements, components and directive in the give template as shown below −
{{ user.value }}
Here, user context is template reference variable.
The precedence of context in case of name collision is as follow,
- Template variable
- Variable in the directive's context
- Component's member variable
Working Example
Now, let's see a practical example of Text Interpolation in Angular.
Step 1: Create a new application using angular CLI as shown below −
$ ng new my-app
Step 2: Create a component, Hello using angular CLI as shown below −
$ ng generate component Hello CREATE src/app/hello/hello.component.css (0 bytes) CREATE src/app/hello/hello.component.html (20 bytes) CREATE src/app/hello/hello.component.spec.ts (552 bytes) CREATE src/app/hello/hello.component.ts (198 bytes)
Step 3: Next, open the component file, hello.component.ts and add a variable named user with value John.
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent {
user: string = "John"
}
Step 4: Next, open the component template file, hello.component.html and add an input element:
Hello, {{ user }}
Here, user is the template input variable exposed by component.
Step 5: Next, open the app component's template file, src/app/app.component.html and add our component as shown below −
Step 6: Finally, run the application and check whether the output is correct.
Summary
Text interpolation is easy to learn as it uses the JavaScript expression. Since, the text interpolation does not allow script tag and allows only expression with no side effect, the text interpolation will help to create safe and secure web application