#15 String Interpolation | Angular Components & Directives | A Complete Angular Course

Summary

This lecture delves into the concept of data binding in Angular, specifically focusing on one-way data binding and string interpolation. The instructor guides through creating a 'product list' component, demonstrating how to dynamically display product details using properties within the component class. The video showcases transitioning from static HTML to dynamic content by binding properties like product name, price, and color. It further illustrates the use of string interpolation for complex expressions, method calls, and ternary operations to render conditional messages, offering a comprehensive understanding of Angular's data binding capabilities.

Takeaways

• 📚 The lecture provided an overview of data binding, explaining the concept of one-way data binding and its implementation methods.
• 🔍 Two methods for achieving one-way data binding were discussed: string interpolation and property binding.
• 💻 A new Angular component named 'product list' was created using the Angular CLI with the 'ng generate component' command.
• 📝 Initially, the 'product list' component displayed hard-coded values for product details, demonstrating static HTML content.
• 🔑 Dynamic content generation was introduced by creating properties within the 'product list' component class, such as 'name', 'price', and 'color'.
• 🦄 String interpolation was utilized to display the values of these properties in the component's view template using double curly braces.
• 🔢 The script showed how to perform calculations and use TypeScript expressions within the double curly braces for dynamic content.
• 🛍 An example of creating a 'product' object with properties and using it in the view template with string interpolation was given.
• 💡 The use of methods, such as 'get discounted price', within string interpolation to perform calculations and return values was demonstrated.
• 📈 The ability to use TypeScript's built-in methods like 'toFixed' to format numbers within string interpolation was highlighted.
• 📉 The use of the ternary operator within string interpolation to conditionally display messages based on the 'in stock' status of a product was explained.

Q & A

What is the main topic of the lecture?

The main topic of the lecture is string interpolation in Angular for data binding from the component class to the view template.

What are the two ways to achieve one-way data binding in Angular mentioned in the script?

The two ways to achieve one-way data binding in Angular are using string interpolation and property binding.

How is a new component created in Angular using the CLI?

A new component is created in Angular using the Angular CLI with the 'ng generate component' command followed by the component name.

What is the purpose of deleting the spec.ts file in the new component?

The spec.ts file is often deleted as it contains test code, and the focus of the lecture is on component functionality rather than testing.

What is the selector used for the product list component in the script?

The selector used for the product list component is 'app-product-list'.

How are static values in the product list component's HTML template replaced with dynamic values?

Static values are replaced with dynamic values by using properties from the component class within the HTML template through string interpolation.

What is the syntax used for string interpolation in Angular templates?

The syntax used for string interpolation in Angular templates is '{{ expression }}', where 'expression' can be a property name or a TypeScript expression.

How can an object's properties be accessed within the view template using string interpolation?

An object's properties can be accessed using the syntax 'object.property' within the double curly braces of string interpolation.

What is the purpose of the 'toFixed' method in the context of the script?

The 'toFixed' method is used to format numbers to a specified number of decimal places, in this case, to limit the display of the discounted price to two decimal points.

How can a ternary operator be used within string interpolation syntax?

A ternary operator can be used within string interpolation to conditionally display different messages based on the evaluation of an expression, such as showing 'only X items left' or 'not in stock'.

What does the lecture demonstrate about using methods within string interpolation?

The lecture demonstrates that you can call a component method within string interpolation to perform calculations or operations, such as getting a discounted price.

Outlines

00:00

📝 Introduction to Data Binding and Component Creation

This paragraph introduces the concept of data binding in Angular, explaining one-way data binding and its implementation through string interpolation and property binding. The lecturer demonstrates creating a new component called 'product list' using Angular CLI, setting up its class and template, and initially using hardcoded values for product details in the component's HTML. The focus is on setting up the basic structure and understanding the static HTML content, which will later be replaced with dynamic data binding.

05:01

🔗 Implementing String Interpolation for Dynamic Data

The lecturer proceeds to explain how to use string interpolation to dynamically pass data from the component class to the view template. This involves modifying the product list component's TypeScript file to include properties for product details and then updating the HTML template to use these properties with double curly braces for interpolation. The paragraph covers the process of updating the template with dynamic expressions, including handling properties within an object and performing basic arithmetic and string operations within the interpolation syntax.

10:03

🛒 Utilizing Object Properties and Calculations in Templates

This section delves into using an object to hold product information and accessing its properties within the view template using string interpolation. The lecturer illustrates how to handle errors when properties are no longer directly available and how to access them through the object's properties. It also covers performing calculations, such as calculating a discounted price based on a percentage, and using TypeScript expressions, including method calls and the use of the 'toFixed' method for formatting numbers, within the interpolation syntax.

15:05

📉 Conditional Display with Ternary Operators and Conclusion

The final paragraph introduces the use of ternary operators within string interpolation to conditionally display messages based on the product's stock status. The lecturer adds a property to check the stock and uses the ternary operator to display either the number of items left or a 'not in stock' message. The paragraph concludes with a summary of the lecture's main points, emphasizing the ability to pass data from a component to its view template using string interpolation and inviting questions from the audience.

Keywords

💡Data Binding

Data binding is a core concept in Angular, which refers to the process of linking data between the model (component class) and the view (HTML template). It allows for dynamic content generation based on the data model. In the video, data binding is explained as a way to pass data from the component class to its view template, which is crucial for creating interactive and dynamic web applications. The script discusses two types of data binding: one-way data binding and two-way data binding.

💡One-Way Data Binding

One-Way Data Binding is a unidirectional flow of data from the component class to the view template. It ensures that changes in the model are reflected in the view, but not vice versa. The video script uses the example of displaying product details like name, price, and color, which are properties of a product object defined within the component class, to illustrate one-way data binding.

💡String Interpolation

String interpolation is a technique used in Angular templates to embed expressions within a string. It is denoted by double curly braces ({{ }}). The video explains how to use string interpolation to display dynamic content from the component class in the view template. For instance, the product name, price, and color are displayed using string interpolation, allowing the view to reflect the current state of the component's properties.

💡Property Binding

Property binding is another method of one-way data binding in Angular, used to bind properties of HTML elements to data properties in the component class. While the video script focuses on string interpolation, property binding is mentioned as an alternative way to achieve one-way data binding. It is used to bind attributes or properties of the view to the component's data model.

💡Angular CLI

Angular CLI is a command-line interface tool for Angular, used to initialize projects, generate code, and perform a variety of development operations. In the script, the Angular CLI is used to create a new component called 'product list' with the 'ng generate component' command. This tool streamlines the development process by automating repetitive tasks.

💡Component Class

A component class in Angular is a TypeScript class decorated with the @Component decorator. It serves as the model for an Angular component, holding the data and logic that the view will present. The video script describes how to define properties like name, price, and color within the product list component class, which are then used in the view template through data binding.

💡View Template

The view template is the HTML file associated with an Angular component, where the component's data is displayed. It uses Angular's template syntax to interact with the component class. The script demonstrates how to use the view template to display product details by utilizing data binding techniques like string interpolation.

💡TypeScript Expression

A TypeScript expression in Angular can be any valid TypeScript code that resolves to a value. The video script explains how expressions can be used within string interpolation to perform calculations or access properties. For example, calculating a discounted price by applying a percentage discount to the product's price is shown as a TypeScript expression within the view template.

💡Ternary Operator

The ternary operator is a conditional operator in TypeScript that takes three operands and is used for simple if-else conditions. In the script, the ternary operator is used within string interpolation to conditionally display whether a product is in stock or not, based on the 'in stock' property of the product object.

💡Discounted Price

Discounted Price is calculated by applying a discount to the original price of a product. The video script demonstrates how to calculate the discounted price using a TypeScript expression within string interpolation, which involves multiplying the original price by the discount percentage and then subtracting the result from the original price.

Highlights

Introduction to data binding and one-way data binding in Angular.

Explanation of two methods to achieve one-way data binding: string interpolation and property binding.

Demonstration of creating a new component named 'product list' using Angular CLI.

Deletion of the spec.ts file from the newly created component.

Configuration of the product list component with a selector and basic setup.

Creation of a static HTML template for the product list component.

Introduction of dynamic content generation using Angular by creating properties in the component class.

Use of string interpolation to display dynamic data from the component class in the view template.

Example of using a product object with properties to replace hard-coded values in the template.

Explanation of accessing properties of an object using dot notation in string interpolation.

Demonstration of performing calculations within string interpolation syntax.

Inclusion of a discount calculation to display the discounted price of a product.

Introduction of a method to calculate the discounted price and its use in the view template.

Use of the 'toFixed' method to format the discounted price to two decimal points.

Application of the ternary operator within string interpolation for conditional display of product availability.

Final demonstration of displaying dynamic content based on the 'in stock' status of a product.

Conclusion summarizing the lecture on using string interpolation for data binding in Angular.

Transcripts

in the last lecture we had a high level

overview of what is data binding and

there we learned that we can pass data

from the component class to its view

template this is called as one-way data

binding and we can achieve it in two

ways we can achieve it using string

interpolation or we can achieve it using

property binding

so in this lecture we are going to talk

about string interpolation

and before we do that let's first go

ahead and let's create a new component

for that I will open the terminal

and I want to create a component called

product list so to create a component

using angular CLI we can use NG generate

command here we want to generate a

component and we want to call it product

list so inside this product list

component we are going to display all

our products let's press enter and let's

wait for this command to complete

so the command has been executed and if

we go to the app folder now there we

should have one more folder called

product list so this product list is

going to contain the product list

component

again as usual I will delete the spec.ts

file from here

let's go to product list component.ts so

here we have this product list component

class decorated with at component

decorator and there the selector is app

product list so let me go ahead and let

me simply call it product list

all right so this is our product list

component now for this product list

component we also have a view template

so this product list component.html is

its view template inside this what I

want to display is I want to display a

product name so I will keep this

paragraph element and there I will say

name and let's say the product name is I

phone

okay then let's also display the price

let's say price is dollar 999.

then let's also display maybe color

let's say color is matte black

and then let's also add one more

paragraph and there let's display

discounted price

and let's say it is dollar 798

okay so with this let's save the changes

and let's grab the selector of this

product list component

and let's go ahead and let's use it

inside our app component so here I'll

open the appcompetent.html file

and in there let me go ahead and let me

use that selector

let's save the changes let's go to the

web page

and there you will notice that those

details are displayed so it is

displaying the name iPhone price dollar

triple nine color matte black discounted

price 798.

but here if you notice in this HTML in

the product list component.html we are

using the hard-coded values for the

product name product price product color

and discounted price right

basically here we are writing the static

HTML and we have learned that for

writing this static HTML we don't need a

framework like angular

we use a framework like angular to

generate Dynamic contents so here what

we will do is I'll open product list

component.ts file and inside this

product list component class let's go

ahead and let's create some properties

so I will create a name property it is

going to be of type string and to this

let's assign some value let's say maybe

iPhone

then let's also specify a price property

it is going to be of type number

and let's say price is

tripling then we also want to have color

property

and again it is going to be a type

string

and let's say color is red

okay and now we want to use these

properties in the product list

component.html let me go and let me

close this app component.html here

okay so here we have our product list

component class and here we have the

view template for that product list

component

so in the product list component class

we have these three properties name

price and color and we want to use the

value of these properties in product

list component HTML

so here instead of writing iPhone

directly we want to read the value of

this name property and we want to

display its value

so here I will simply call it iPhone 13.

okay so in the view template we want to

use the property of the component class

so here we want to pass data from the

component class to view template right

and for that we can use string

interpolation

so here where we want to use the value

of the name property in the view

template there what we can do is there

we can use a double set of curly braces

like this

and inside that double set of curly

braces we can specify the property name

which we want to use in this case

property name is going to be name

so this expression here it will be

replaced by the value stored in this

name property

okay so earlier it was showing iPhone

now it should show iPhone 13. let's save

the changes let's go back to the web

page

and now you see name of the product is

iPhone 13.

so this is how we use string

interpolation to pass data from

component class in this case we are

passing data from product list component

class to its corresponding view template

which is this product list

component.html

in the view template all we have to do

is we have to use a double set of curly

braces and in there we can write any

typescript expression here we are simply

using a property name but we can write

any typescript expression inside this

double set of curly braces

all right so in the same way instead of

writing the hard-coded price here what I

want is I want to use the price property

so this property so again

here let's go ahead and let's use a

double set of curly braces like this and

inside that let's use the property name

which is price

now some of you might say that I have

added a space before the property name

and a space after the property name is

that mandatory no that is not mandatory

because if you see here here I have not

added any space okay so just for

formatting we can add some space but

these spaces are not required okay

in the same way here we want to use the

color property

okay so if you save the changes now and

if you go to the web page

there the value of those properties

should be rendered as you can see

all right

now instead of having these properties

here like this let's go ahead and let's

create an object here

I'll call it

product

okay and inside this product we will

have a name property for this product

object so let's specify a name for the

product again I will say iPhone 10 or

iPhone x

let's specify price here maybe 789 and

let's specify

color

and let's say color is black

so now we don't have any name price and

color property inside this product list

component now we have a product object

and in that product object we have name

price and color property so how can we

use this product object in our view

template using the string interpolation

syntax

so as you can see since these properties

are now not available inside this

product list component class here we

have some error

and the error says name does not exist

on type product list component in the

same way for the price it will say price

does not exist on type product list

component right so here now we want to

use this product property

and from that product property we want

to extract the name price and color

and again we can access this product

property in our view template using

string interpolation so here instead of

name we can say

product Dot

name

and the error is gone in the same way

here we can say product dot price

and here we can say product dot color so

here we are trying to access the name

property the price property and the

color property of this product object

and this product object is basically a

property of this product list component

class

and this should also work so if I save

the changes and if you go to the web

page

now we have the desired result

as I mentioned inside this double set of

curly braces we can use any typescript

expression

so here you see I'm using this dollar

before this string interpolation syntax

but what I can also do is

inside these double set of curly braces

I can specify a string here the string

is going to contain this dollar and then

I can use Plus

so here we are concatenating this string

with this value

so this value will be first converted to

string and those two strings will be

concatenated

so if I save the changes if we go to the

web page

you see we still have dollar 789 but

this time we have concatenated that

dollar using a string

then inside these double set of curly

braces we can also do some calculation

because as I mentioned we can write any

typescript expression inside this double

set of curly bases

so here let's go ahead and let's specify

a discount for this product so let's say

maybe discount is 8.5 percent

so now what we want is based on this

discount we want to display the

discounted price here

so here again let's use a double set of

curly braces basically the string

interpolation syntax and in there we are

going to write some arithmetic

expression

so here what we want to do is we have

this price on this product objects we

can say product dot price okay and we

want to multiply it with the discount so

we can say product dot discount

and this discount

it is in percentage so we also need to

divide it by 100 so we can say divide by

100.

okay and then it should give us the

discounted price so

on this price on this dollar 789 there

is a discount of 8.5 percent

so now this expression here it should

calculate that discounted price and it

should display it so let's see if the

changes let's go back to the web page

and here you see it is showing that

discounted price

so basically on this price there will be

a discount of these many dollars so we

need to subtract this from the original

price

let's go back and let's do that

so I will wrap it within parenthesis

like this okay and we will subtract it

from the original price so for that we

can say product which is the property

name dot price

minus whatever discount price we have

calculated

let's save the changes let's go back to

the web page

and now we have the discounted price

okay so in this way

inside these double set of curly bases

inside the string interpolation syntax

you can write any typescript expression

even you can call a function inside this

string interpolation syntax

let's actually see that so what I will

do is I will cut this logic from here

and in our component class let's go

ahead and let's create a method to

create a method we can simply provide a

name for the method let's call it get

discounted price

and in the body of this method let's

write our expression

now here in order to access this product

property from within this method here we

need to use this keyword

so inside the method whenever you want

to access a property you will have to

use this keyword in order to access that

property okay so since this property is

not a static property we need to use

this keyword in order to access it

so here also we need to use this keyword

and Here Also let's say

this dot product dot discount

and whatever value this expression will

return

we want to return that value from this

method so let's say return

okay and now we can go ahead and we can

call this function in our view template

so let's go to the view template and

inside the string interpolation syntax

let's go ahead and let's call that

method

okay so when we are calling this method

it is going to return us the discounted

price so basically this expression it is

going to return us the discounted price

and that will be displayed here in place

of this expression let's see that let's

see if the changes let's go back

and we still see the discounted price

here

inside this string interpolation syntax

we can also use typescript inbuilt

methods and properties

for example let's say

here in the discounted price we can see

three decimal points but instead of

showing three decimal points let's say

we only want to show two decimal points

so for that in typescript we have a

method called to fixed

so on this result we can go ahead and we

can use that

to fixed method

and to this two fixed method we need to

pass the number of decimal points which

we want in the result here I want only

two decimal points so I will pass two

and now if we save the changes and if we

go back to the web page

now you see we only have two decimal

points after the decimal

we can also use ternary operator inside

this string interpolation syntax let's

understand that with an example so here

for this product let's add one more

property let's call it in stock

and let's say in stock currently we have

five iPhones

okay now what we want to do is if the

products are in stock that means if the

number of product in stock is greater

than 0 then we want to show a message

only that number of product is left so

let me actually show you that with

example

so again I'll add a paragraph element

here

and there let's use string interpolation

syntax and here let's check if product

which is the property name Dot in stock

if it is greater than 0 here we are

going to use ternary operator so if it

is greater than 0 after the question

mark we will specify a string value

we'll say only and then we'll specify

the in stock value

product dot in stock

items left

okay

but if it is not greater than 0 that

means the product is not in stock in

that case we want to say not in stock

okay with this let's save the changes

let's go to the web page so currently

in stock is 5. if you go to the web page

it should say only five items left

but if I change it to 0

and if you save the changes and if we go

back that it will say not in stock

okay so in this way we can also use

ternary operator within this string

interpolation syntax

all right so in this lecture we learned

how we can pass data from component to

its view template using string

interpolation syntax

this is all from this lecture if you

have any questions then feel free to ask

it thank you for listening and have a

great day