Session, let us learn about interpolation, which is a type of data binding, what is data binding data binding is a technique of passing the data from the component class to the template that is from the source to the view or vice versa from the view to the source. This data binding is categorized as one way data binding and two way data binding. In one way data binding It can be from source to view are from view to source in case of source to view there are few types of interpolation, property binding attribute binding class binding and style binding. In case of view to source it is even binding that you are going to take the data from the view template to the source class add us to the component class. This is One one way binding in case of two way binding, it is both the way the data is transferred from the view to the source and from the source back to the view, it has achieved with the help of MG model.

To start with in this particular session, let us learn about interpolation. interpolation is used to carry the data from the component class to the view it is expressed with the help of double curly braces, whatever variables you are having in the component class that can be retrieved in the view class using interpolation. You can also pass template expressions within interpolation. Have a look over here in my component class I have created two variables two instance variables, one is message which is of stripe string, the other one is employee which is an object I am trying to retrieve In the HTML that is in the view, using interpolation using double curly braces and pass retrieving message, in case of object if I want to retrieve the individual properties, I can go in for the dot operator employee dot name employee dot age and so one and the last one is template expression two plus one, this template expression will be evaluated converted into string and given back us result.

Now, let us try to so let me go back to Visual Studio code, I am going to work on the same code component only. In the home component class. Let me create two instance variables message equal to have a great date. Let me create an employee object and created the employee object. You can see here I'm getting rid must you feel not done proper formatting for your TypeScript class. You will be getting these kinds of warnings.

So, you need to formatted properly you can just keep the cursor here you will get the content assist missing whitespace because there is a whitespace missing it is giving this warning Let me also open this part, you can just have a look in the home component we are changing home component.ts it is in red color meaning to say that you are having few warnings just give a whitespace it only warning it will work properly it will work fine even if you are running this application, but try to avoid the warnings I have given proper whitespace let me end it with the semicolon this employee object see the moment I gave a semicolon automatically changed to green color I will remove it see it is in red color. Let me put a semicolon the formatting is done properly. So I am getting it in green color. Now, let me save this.

Let me come to this home component dot html here I have got this homework Let me remove this within which I am going to add a message. So I will have it as h2 then double curly brace, message. And then I want to get the employee name here so we can have it double curly brace, employee dot name. And let me add a template expression also some color to play plus one is now I'll open the terminal control Tilda the application is still running. You don't have to do anything you can just go and check in the browser whether your God output so here's so I'm in the browser, you can see the output. Have a great day ramasees Employee dot name Have a great day see message and this one a C template expression.

So, what actually we have done this, we have tried to retrieve the data from the component class in D view using interpolation. In the next session, let us learn about property binding. Thank you