In Angular, the component's logic and behavior are defined in the component's TypeScript class.
In this activity, you'll learn how to update the component class and how to use interpolation.
-
Add a property called
city
Update the component class by adding a property called
city
to theAppComponent
class.export class AppComponent { city = 'San Francisco';}
The
city
property is of typestring
but you can omit the type because of type inference in TypeScript. Thecity
property can be used in theAppComponent
class and can be referenced in the component template.
To use a class property in a template, you have to use the
{{ }}
syntax. -
Update the component template
Update the
template
property to match the following HTML:template: `Hello {{ city }}`,
This is an example of interpolation and is a part of Angular template syntax. It enables you to do much more than put dynamic text in a template. You can also use this syntax to call functions, write expressions and more.
-
More practice with interpolation
Try this - add another set of
{{ }}
with the contents being1 + 1
:template: `Hello {{ city }}, {{ 1 + 1 }}`,
Angular evaluates the contents of the
{{ }}
and renders the output in the template.
This is just the beginning of what's possible with Angular templates, keep on learning to find out more.