 Hello guys, in this video we are going to create a simple calculator app in Angular. So let's go ahead with command prompt and write the command ng new and project name that is CalculatorApp in order to create a new app. So make sure your internet is connected and for the time being we are using only one component so we don't need routing so let's go ahead and hit no. Then you can choose the CSS I'm going with the basic CSS so later on whenever we will use other CSS then we will choose accordingly. So let's wait for this to finish. So once it is done you can just close it and go to your project folder that is CalculatorApp and just open this folder with VS code. So once it is opened we can simply go to terminal and simply write the command ng serve and hyphen o in order to open it in the browser. So it will generate the build for the browser. So once it is done it is going to open it. So meanwhile it is generating we just go to source app and here you can see by default you have this root module that is app module which is using one app component over here so we have default opened. So let's go back. So we have this default component and that is called root component. So let's go to the HTML file for these. This is the HTML file that is displayed on the browser and this is the CSS file that is currently empty and this is the testing file for the sake and we just need to modify this one. Let's delete everything and simply use the table tag over here and just save this table and inside the table we will use table row. So we are just designing a form kind of thing tr and inside this tr we will be using td and this would be first number and just close this td and the second would be the input tag for getting input from user. So input type is equal to number and then place holder let's say first number save this and once I save it you can see immediately this is output coming over here. So same way let's quickly create one more row and create second number. Same way this is for second number and then save this. Let's create one more row and this time we don't need this first column and in second column we will be using button tag over here and inside the button we will use add let's just save this. So add button is here same way we can add one more button over here. So let me add one more button here this one is for subtract save this same way I will add one more row that would be for multiply and divide next we need one more row that would be holding the result let's say so result and here would be the result. So now what we can do we can add little decoration over here. So let me add one caption over here let me use for tag over here. So you can decorate it as per your requirement calculator save this okay. Now I just go to CSS and just use this table over here and in this tag let's try to give some background color yellow save this okay so we are getting this yellow let's use some water as well for decoration one pixel and so let's give it gray color save this and we can use some padding as well let's use 10 pixels and now we need to just put it in the center of the screen. So what to do let's use the property top to 50% and left to 50% and once you do this it is starting from the center. So we need to just write that position fixed save this okay now it is moved to the center but we need to just take it to the center point instead of starting from the center for that we can just use that transform property transform and for that we can just translate it to minus 50% and minus 50% take just save this it should move to the center yes exactly. So what we can do we just change this color from yellow to something else so that it should look good we have this RGB color factor. So let's use 240 for R, 244G and 244B save this now it should look better okay so everything is done so we can do what we can just add little spacing between these buttons so let's go here so we can use that button here buttons and for button we need some margin let's say you can say 2 pixels save this and we get margin and let's make a fixed width of these buttons so that it should look equal 80 pixels I think that's enough. So seems better now we left with we can just move these buttons to the center as well so let's do what let's create one class here dot center content and we simply say text hide one align center and we can just copy this class name and go here and just add it to this DD class is equal to this and same way we need to just align these using class is equal to center content so now it seems better so what we left with now we need to create some template reference variable so that we can get the enter value so let's define over here by using hash so this is my first number and I'll just copy this and same way I just create one here for my second number second number and to assess these values let's add a click event over here so once it is clicked what to do simply just call a function that is add so once you're adding we need to pass these values so how do you do so simply say this template reference variable dot value so this gonna give me the value whatever user will enter as a value property and the second argument I would like to have is second number so we just copy it from here and paste it just save it so since these values are not available so that's why it is showing and let's do what simply just create a add over there I just copy this for simplicity and we just move to this component of TS file and simply create here one function and instead of using this dot value we can simply just add two variables so we can just make it as number type number type and here you can simply log let's say first number plus second number just not giving me auto stations let's save this and you can see we are facing this operator cannot be applied to number okay so the problem is that by default we are getting it as a string that's why we are facing this problem let's convert this as a string and working for let's open this inspect and go to console and let's clear everything and type let's say 30 and 2 so let's click on add and you can see you are getting 302 so since both are strings for whenever you use plus operator it gonna concatenate so what we can do we can just create a result variable over here which would have something let's say initially we don't have anything I just use it as a string type for nothing we have initially so whenever we will execute this function we can do what we can simply say result or we have to say this dot result is equal to so first of all we need to convert this to numbers so that we can change this concatenation to arithmetic addition and once you got this number you can simply just convert it back to string since this should be as a string okay so let's save this and one more thing we need to do if you want to display the result over it just go here and I just use the bold tag over here just use this variable which variable this result variable okay so copy this and this gonna display the value over there so let's try this time say 20 and to go at and you got 22 and same way I just make it bold and one more thing we can do I just add because we need to perform different operations so I just create one more variable over here that is result name is equal to initially it should be result and later on we can change this for example if this is like this so we would say this dot result name is equal to add result this would be better for example if I try to use this first of all go back here and same way instead of using this result I have to use that variable result name so initially it is coming result so if I use this addition it would say add result 33 so same way I need to add this function call with all the buttons let's copy this paste it go down paste it go down paste it and just change from add to this one is for subtract and same way this is for multiply this is for divide so save this you may get error because we have not created these so let's go to TS5 just copy this paste paste paste the first one is for add second one is for subtract and say subtract result and here change the sign from plus to minus and go down this one is for multiply and just change this text to multiply and change this operator to multiply go here change this to divide function and change this text to divide and change this operator to do this save this so errors are gone so let's go back and try this so I say let's say 50 divide by okay so let's go for add is giving 52 subtract 48 multiply 100 divide 25 so that's all for this video if you have any doubt do comment in the comment section otherwise like subscribe and share thank you