ANGULAR DIRECTIVES (ng if, ngFor, ngClass) & PIPES | Angular 9 for Beginners 2020

hey what is up everybody in today's video you are going to learn how to use some of the most important angular directives like energy for ng-if etc and how to use pipes before we begin if you are here for the first time consider subscribing for learning more about web development and activate your burn notifications so when I upload a new video you will get notified if you are ready let's get start a directive is basically an attribute special for angular that extends HTML there are built on directives and angular starting with the ng / fix like ng for ng if ng template and so on but we can also define our own directives the main types of directives are structural directives which can change the layout of the page by adding and removing Tom Adams the second type is attribute directives which change the appearance or behavior of an element a component or other directives and there are also custom directives that we can design and use them constantly but this is a more advanced stuff and I won't cover them in this video now let's go back to our project and see how to use the structural and attribute directives okay so this is our component from the last video suppose that we have an area of numbers and we would like to render it let me go back to the template we can call the array with interpolation but the problem here is that it renders the complete array instead of doing that we can print all of the elements of the array one by one in a list how would we do that in JavaScript by using two for loop right the for loop would traverse the elements of the array one by one until the end similarly in angular by using the ng4 directive we can traverse the array and also we can generate additional Dom elements or HTML tags in the template so let's do that firstly I define an unordered list for example and take the interpolation value inside of it okay next here inside the Ally tag I am defining the ng4 directive because as I said before we can extend the HTML tags with directives and to define the in g4 directive firstly we need to put here asterisk characters because it's a structural directive and then type ng for this equals the numbers array itself but here we need to define a new variable let number of numbers for example finally inside the interpolation I call the variable numbers and let's see exactly so the angel for directive generates new list items as many as they exist inside the earth so as we can see here is only one Ally tag but with the angel for directive it generates new list items as many as they exist inside there our next structure alert tube is ng if we can use ng if for conditional renderings now if we delete the elements here there is only a white page to prevent this we can give here additional information when there is no element inside the array for example we can show here a text slide more data when there are no element inside the array and render this only if there are no elements inside theory let's delete this so again the Astor's character ng if falls the list here if there is at least one element inside teri and if not then hide this one and show this texture okay now there are elements inside the array looks like it's working let's also test this with an empty array so let's delete this one here and as we can see this time the text appears here and if I take the elements patch the text is gone and the elements are - so this is how the ng-if directive works and how we can use it for conditional rendering in angles now let's move on with some examples for the attribute directives in angular we can also change the style or appearance of an element by using directives and the ng class directive is a good example for that for example let's change this text color - - another one now I define a standard CSS class text red color red and another class for green now we can also use these classes conditionally for example if a case is true then the text color will be red otherwise it will be green so let's define here a boolean variable is green for example and assign it to true now if the boolean case is green is true our text will be green otherwise it will be red and we can use the ng class directive to do that so I need to define here ng class and this time without the asterisk character because it's not a structural property but I need to take this inside brackets because of the property binding which I will explain in the following video just for now know that brackets binds the ng class narrative to our component alright now I need to define the condition here so if our is green variable is true the ng class is going to use text green class otherwise text right okay now our text is green now for testing I am changing this boolean variable to false and now it should be read exactly as we can see now our text has turned into red so by using the ng class attribute we can bind variables to our CSS classes and also use multiple CSS clauses conditionally it's very useful there are also other directives in angular but they work basically the same as either structural or attribute I can't cover all of them in a single video but if you got the idea how they work then you will be able to work easily also with two other directives now let's move on with pipes what pipes to is that they transform data to various forms before it is rendered they don't transform the actual data by the way they only let a change how it is being represented on the you you can transform strings numbers data currency and much more things by using pipes for example we can transform this texture to complete lowercase or uppercase and to do that inside the string interpolation we need to put firstly a pipe operator and then let's type lowercase and let's see now the text is completely lowercase we can also print it uppercase and now our text is completely Apogee's we can also define in currency types and change the type of the currency so let's define a currency here right cash 199 and now let's render it cash and now let's use the currency pipe currency and now it's 199 dollars by the way the default currency type is dollars we can also euro for example and to do that we need to define its euro type and as we can see now it's Europe let's give one more example this time for the date object we can also transform date by using the pipes in angular so let's define a new date here from the date object and change this to date and Pleet this okay now as we can see here is our date object and now I can use a pipe to shorten it again the pipe operator and to shorten it let's write date here so this is the pipe name and now it's a shorter date let's see it for a much shorter date short date and now it's even shorter so this is the date pipe and you can find much more about two pipes on the official documents I'm not going to cover all of them before closing there is one more super important directive which is the engi models the angel model directive is being used for data binding which we will talk about in the following video if you find this video useful please hit the like button thank you guys for watching and see you in the next video

Channel: Cem Eygi Media

Views: 4,688

Rating: 4.9298244 out of 5

Keywords: angular directives, angular pipes, angular 9 directives, angular ng, angular ng if, angular ngclass, angular ngfor directive, angular date, angular date pipe, angular currency pipe, angular currency pipe example, currency pipe in angular 9, angular 9 tutorial for beginners, angular 9 tutorial, angular tutorial 2020

Id: 3-eJ-A9rFEU

Length: 8min 45sec (525 seconds)

Published: Wed May 06 2020