31e81947-5646-4259-9bc5-25bf7dc92e1b
अध्यायः
-
0:01अध्यायः 1: So we'll do a quick recap here. 60s · Speaker 1
So we'll do a quick recap here. This is the third day of Angular training. So we'll do a quick recap. Last week, we talked about ECMAScript. What are ECMAScript? Rules and guidelines for scripting language. Then we talked about Node .js. Wh…
-
1:02अध्यायः 2: Now, today, What I'm going to do is we are going to talk about creating an Angular project. 73s · Speaker 4
Now, today, What I'm going to do is we are going to talk about creating an Angular project. Let's understand a little bit about Angular first of all. Last time, we also talked about what is the importance of these frameworks. Why these fram…
-
2:15अध्यायः 3: So let me just open the folder and here I'll be creating a Angular folder. 187s · Speaker 3
So let me just open the folder and here I'll be creating a Angular folder. Okay. So now we are going to. First of all, understand what is required for creating any Angular application. The first requirement for creating an Angular applicati…
-
5:22अध्यायः 4: sorry. Slap. 303s · Speaker 6
sorry. Slap. Okay. And you can run it globally as well or you can learn locally. So I'll just run it globally. Hyphen G. Enter. So, it will take a little time to get an install. Now, we are actually installing what? We are installing CLI. W…
-
10:26अध्यायः 5: comma, and I'll add the bootstrap version. 70s · Speaker 5
comma, and I'll add the bootstrap version. And the below version what you see here is are basically the dev dependencies. What is dev dependencies? Dev dependencies are those which you need it only for your local system. These are not requi…
-
11:36
Clear? So npm install is going to install all these packages. But when you're building the application, the major packages which is required for your application to run are going to be in these dependencies. Clear? So I'm just writing the s…
-
14:49अध्यायः 7: correct? But if you go and see the node modules, this is approximately around 250 MB of folder. 300s · Speaker 8
correct? But if you go and see the node modules, this is approximately around 250 MB of folder. If I check the size of the folder it is 250 MB and the file could be around 30 ,000 maybe approximate. I'm just giving you approximate value, 30…
-
19:50अध्यायः 8: A component called as a app component. 140s · Speaker 1
A component called as a app component. It is also picking some config from app .config. Let's go where is this file. file, app component, I press F12 here, I came into a file called as appComponent .ts. Now this class, this is a class, corr…
-
22:11
a class. So, if I want to define a component, a very common definition of a component is, it's basically a combination of a class, a template, and metadata. It's a combination of a class, template and metadata. That means it's like a web pa…
-
24:00
build, compile, build, spin -up, live development server. Okay. And also it will do which is bundling. Okay. All of this gets together happened just by writing this one command. Otherwise, I need to do that manually while writing build and …
-
28:40अध्यायः 11: Okay. And there is one more file which is spec. 62s · Speaker 8
Okay. And there is one more file which is spec. Right now, just ignore this pack. This is for unit testing. So whenever you create a new component, this four files gets created automatically. And the second important thing what you'll see i…
-
29:42अध्यायः 12: Click. I open one more terminal for me. 305s · Speaker 2
Click. I open one more terminal for me. I'll go to that folder where my project is there, myproj. Here, I went into my project. Now here, I'm going to write a command called ng, g for generate, c for component. understand a first component …
-
34:53अध्यायः 13: And here, let's say I have an input type text box. 98s · Speaker 1
And here, let's say I have an input type text box. Okay, now if I want to show that product name on the screen, what I'll do usually I'll just say product name, correct? Now, what is going to happen if I just write product name here? In the…
-
36:31अध्यायः 14: Okay. Oh my bad That's strange. 230s · Speaker 5
Okay. Oh my bad That's strange. Okay, so so yes now it is going to print the product name Now, if I want to print the actual value of that product name property, I'll just put a square bracket here. This is called as a property binding. So …
-
40:22अध्यायः 15: Now, what is happening here is guys, if you observe. 156s · Speaker 4
Now, what is happening here is guys, if you observe. I have the value printed in all the three sections, right? But what I want here is when I change the value here, it should actually reflect in my other code as well. Wherever that same pr…
-
42:59अध्यायः 16: No issue with, I don't have to change any code here. 140s · Speaker 7
No issue with, I don't have to change any code here. I just have to change it with text area. Rest all remains the same. Because I am playing with what? I am playing with model. Is it clear? This is called as a two -way binding. So for two …
-
45:19अध्यायः 17: Okay. And the value, the property binding, when you are actually playing with the attributes. 157s · Speaker 8
Okay. And the value, the property binding, when you are actually playing with the attributes. Okay. So if you see, if I keep attributes as a value, it will usually bring as a string. For example, if you want to have a value called as a clas…
-
47:57अध्यायः 18: Now, the next thing, what we are going to talk here is something called as a directives. 74s · Speaker 4
Now, the next thing, what we are going to talk here is something called as a directives. Okay. What is directive? I'll be using a lot of different, different terms, guys. Directives. What is directives? Directives are nothing but changing o…
-
49:11
In fact, this div will now get converted into a table as well. Possible. That could be possible. Directives are nothing but extend the power of existing element. It also changes the behavior, appearance, and behavior of HTML element. Certai…
-
54:09अध्यायः 20: else block. 67s · Speaker 8
else block. Now what is this if block and else block? Okay, and you will get error for this as well. I'll tell you what is required. If block and else block. What are this? If block is nothing but it's like a template. So I wanted to render…
-
55:17अध्यायः 21: Clear? Remember these things. 88s · Speaker 7
Clear? Remember these things. Okay? And again, please, I would say, don't try to understand or try to remember the syntax. Syntax here is not important, guys. For syntax, you can always Google it. My only intention here is to understand wha…
-
56:45अध्यायः 22: See, it's just printing the even and odd, but it is actually not showing and hiding. 119s · Speaker 3
See, it's just printing the even and odd, but it is actually not showing and hiding. Guys, this is actually altering your DOM. You will see there is no section called as number is even anywhere in the code. But when I type here an even numb…
-
58:45अध्यायः 23: and li. So what I'll do is, guys, just see, I'll just create a ul and I'm going to create li. 199s · Speaker 4
and li. So what I'll do is, guys, just see, I'll just create a ul and I'm going to create li. Now this li, I want to repeat it how many times? Three times. So here I need to loop it, right? So here I'm going to apply something called as ng4…
-
1:02:05अध्यायः 24: string, price, number. 208s · Speaker 7
string, price, number. Let's have an implementation. Remember, we have done this. In implementation, what I'll do is I'll make this as an optional and I'll just check a condition that if product code or PID is not equal to undefined, then j…
-
1:05:33अध्यायः 25: Okay. Let me give you a border here. 71s · Speaker 2
Okay. Let me give you a border here. T head. TR. which is going to have th. In here, I will be saying product ID. Then you will have product code, price, and product code, name, and price. Let's bind this. So t body, what is going to get re…
-
1:06:45अध्यायः 26: spelling. 270s · Speaker 6
spelling. Okay. That's it. And you will see a grid is there. And if I want to add any extra item in the grid, I can have a simple button and I can push that into the grid. So I'll just show you a simple example. Button. I'll say click event…
-
1:11:16
Same way, I can apply one more, wherein I will say class .price. P1, if the condition is prod dot, price is greater than 500. And you can see the changes here. This syntax, if you observe here, I am using class dot and the name of the class…
-
1:12:29
in this div, I wanted to have a div or maybe I wanted to have a italic tag which says that if ng, I'll apply ng if here and I'll say if my price is greater than 500, discount available. Sort of. You can see now. Did I wrote any code here? N…
-
1:14:16अध्यायः 29: Hard code, I'll set it to red for now. 113s · Speaker 5
Hard code, I'll set it to red for now. Okay, so whenever I change the color of the drop, whenever I change this value on my drop down, automatically the selected color will get updated here. And you can print that value and see if you want …
-
1:16:09अध्यायः 30: Till then, any questions here? 212s · Speaker 2
Till then, any questions here? Is everyone clear with the directives? Should I? I hope everyone is clear, right? Everyone is getting my what I'm trying to say here. See all these things you are going to apply it in one of the other places i…
-
1:19:41अध्यायः 31: clear? Fine, so let's wrap it for today and we'll continue with creating our own custom directive and also we will look for pipes. 141s · Speaker 7
clear? Fine, so let's wrap it for today and we'll continue with creating our own custom directive and also we will look for pipes. So the next session would cover. Custom directive, my plan was to take it today, but again, sometimes it does…
-
1:22:03अध्यायः 32: very, okay. 55s · Speaker 4
very, okay. Screen was not shared. Okay. Literally, that chat is not properly working. So that's why. Okay. So what I did is, guys, I just said, whatever we have covered till now, that was basically the different types of directives, right?…