In this section, we're going to dedicate our time to learning the features revolving around components.
It's one of the most powerful features in angular.
Furthermore, we will be working with components a majority of the time in this course.
As a result, there are a lot of features to unpack.
To begin, we're going to focus on interpolation.
Angular loves its terminology.
Words like interpolation and expressions come up frequently.
Here's a quick refresher on expressions.
A JavaScript expression is a single line of code that can be evaluated to a single value.
The value can be a no string or logical value.
There are all kinds of expressions.
Here are some examples.
Arithmetic operations, basic string manipulation and logical comparisons are considered expressions.
All three examples will evaluate to a single value to add more clarity.
Here are some examples that aren't considered expressions.
Variable declarations, conditional statements and function declarations are not expressions.
We can add expressions directly inside a template.
The process goes something like this.
Angular will search through our templates for expressions, and expression can be inserted into a template
by writing two pairs of curly braces with the expressions inside.
The expression can be whatever we want.
It'll process the expression.
Whatever gets evaluated will be output ID on the template by replacing the curly braces with the evaluated
value.
Angular handles the majority of this process for us.
Another word for describing this process is called string interpolation.
These two phrases can be interchangeable at times, but there is a difference between them.
Expressions are the code inside the curly braces, whereas string interpolation describes the process
of replacing a placeholder with a string value.
Therefore, you can say the expression name is interpolated into John.
The terminology can be confusing.
Sometimes developers will throw around both words.
It's important to know what they mean when they use these terms.
Enough terminology.
Let's put what we've learned into practice.
We will continue working on the basics project we created in the last section.
Open the app component tips file.
Inside the class, let's create a property called name with a random value.
Our component can store data.
The data we store in a component will be isolated from other components.
If we are using these same component multiple times, they'll each have a property called name.
If this property changes in one component, the changes won't be reflected in other components.
Let's try rendering the name in the templates.
Switch over to the app component dot html file.
In between the paragraph tags, we will replace these static text to output the name property, the
name of the property must be wrapped with double curly braces.
A couple of things worth mentioning about this syntax.
The curly braces help angular identify where writing and expression.
We can't simply write their property in the template.
Otherwise, angular will interpret this expression as static text.
Secondly, we are writing the property name without the this keyword.
We don't need to include it.
Angular is smart enough to know where to find the property in the class.
It'll establish a connection for us, which makes our templates look cleaner.
Templates have access to the components properties before we test our code.
Let's explore what else we can write in expressions.
Expressions can contain method calls after the name property.
Let's change the two uppercase function.
Next, let's try creating a method in our class for outputting the name, switch back to the class in
the class defining method called get name.
It'll return the this dot name property.
Back in the template, we will make a copy of the paragraph, take instead about putting the property.
The expression will be replaced with a method.
Once again, we don't need to be this keyword Angular understands we're trying to call a method from
our component class methods or a publicly accessible to a template.
Let's try adding one more expression.
We will add one more paragraph tag for rendering and age.
Instead of outputting a property or method, let's try performing an arithmetic operation.
One last thing.
The text of the paragraph tags will be orange for readability.
We should remove this change.
Open the app component access file.
We're going to remove these stylings we had inside this file.
That'll do it.
Refresh the page in the browser.
The expressions we've written have been interpolated into the browser, Angular gives us a lot of flexibility
with the types of values we can output to the document.
It's common practice to keep the template as minimal as possible for the age.
We're performing an arithmetic operation.
It's not the worst thing in the world, but if we can help it, we should perform operations in the
class.
The job of the template should be to simply output data.
To recap, interpolation is the process of replacing placeholders with string values.
We can output properties by using double curly braces in our templates.
Decode inside the curly braces must be an expression.
The evaluated value from the expression is what will get output in angular will replace the curly braces
with the evaluated value.
There's one more thing I want to show you before ending this lecture.
If you're using Visual Studio code, there's an extension for assisting us with writing templates.
Back in the editor, go to the Extensions tab.
Search for an extension called angular language service.
We're going to install this extension.
It's an official extension by the angular team.
This extension will help us write expressions by giving us a list of properties and methods in the class.
Let's try it out.
Switch over to the templates.
We're going to rewrite the expression for the name as we do.
So, the editor will give us a list of properties and methods inside the class.
This feature can be beneficial for quickly writing templates.
We don't have to switch back and forth between the class and templates in the next lecture.
We're going to continue exploring other component features.