Angular 10 Tutorial #20 - ngFor in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in the previous episode we have learnt about a built-in structural directive called ngif we learned and we mastered it today we are going to learn about ng4 and we are going to learn all about all the variations that we can use ng4 with this is part 20 of angular 10 full tutorial series for beginners make sure you check out the complete angular full tutorial playlist i have planned around 100 tutorials for you including live projects the notes and the code and the github link will be updated in the description box below make sure you check it out all right so so far we have covered all the topics that are on your screen right now each of this topic i have covered in detail with examples with live explanations of use cases that can be implemented so make sure you check out the previous video so that you have continuity in your learning all right so today is the 20th episode today we are learning about ng4 so ng for if you're coming from any programming background it doesn't matter which programming language you're coming from but you would have used for loop so ng4 is something similar which is used to iterate uh or loop a particular elements to display the array data in the template so the syntax is you'll write asterisk that's how we know that it says built in structural directive uh asterisk followed by small ng f upper case or o r and then we'll say let element of the collection right that's how we write it and since it's a loop since it's an iteration it will have indexes right which is which are called local variables uh through which we can get index first last even odd etc so that's that's about uh the theoretical explanation so let's jump into the hands-on examples before we go there i'll request you to kindly please like share comment and don't forget to subscribe to my channel to keep supporting me thank you so much let's jump right into the hands-on act all right so so last episode we have learnt about the ngf and four so today let's learn about learning and g4 okay so for that obviously uh we'll need uh some kind of a array right or collection so i'm going to call it as contacts and i'll make it an array and it will be a i'll keep it simple i'll not complicate it uh so what i'm going to do i'm going to say first name the idea here is to keep it simple so that any new beginner should also be able to follow easily and should be able to implement in their project right simple nothing great or complex structure here all i have done is a simple three um it's a simple object which has three keys and key value pair right so and it's an array obviously so i'm not going to go into too much details of modifying this okay now just some values random okay all right so i have got a array which has the contacts this is what i have written it in my class right app component class now in the appcomponent.html what we will do we will implement a simple ulli right it's nothing but unordered list right so which can be used to loop the data so here we'll write asterisk ng for equal to let contact of the same name what you have given in your class right so it's contacts copy that in the app just put it here contacts and we will use double parenthesis right what it is why it is used that is too advanced for you to know at this point of time all you should know is this is used to display the data or in angular terms it is called as interpolation okay it is called interpolation i will cover that in the coming episodes when we do data binding for today all you have to know is that we are doing this so that there is a value which can be displayed all right that's all now let's go to our page and now we see object because it's an object so here we'll say i'm saying in this object print the key which is first name so here you see we have the first name now someone can say no i want the last name also so we can say oh sorry okay all right so what happened uh so there is no last name contact dot first name contact dot last name okay this is good let's just re reload it sometimes if you see this error just restart because maybe it's in cache that it's not able to print it correctly okay so i've just restarted it again the application it's compiling let's give a couple of minutes in the meanwhile please hit the subscribe and like button if you have any doubts any queries do let me know in the comments section i'll be happy to help you all right so now you see it has successfully come compiled and we see the values right all right so this is how i'm printing the value from this particular object right it's a loop right ng4 looks simple now let us say and what i am going to do is i am going to be little creative and i am going to put this here and put this in a div ok now the reason i am doing it is because now we can take the values like for example local variables now i am saying get the index of each row right and display that also right so see now i'm displaying the index value also which is i and remember it's an array so it will always start with 0 so the first record will be 0 1 2 right then i can also say check if it is the first one so we can say first as f now i am saying now see i am clubbing two i'm using ngf if it is first right or let's do something like this right so what i'm going doing here is i'm create i'm creating two divs okay and close this here okay so if it is first right i'll say this is first record right and now see okay so again it's error so whenever some something like this happens uh just close the application control c and restart it it will work fine okay so i'm saying if ng if f that means it i'm asking if it is a first record then show this also okay let's see now so if you see such errors don't get scared it's sometimes caching issue that it doesn't reload or something just cancel and restart the application again it should be fine so now you see this is first record for the first one it is saying right a good way is maybe we can style it up a little bit right so i'm saying if it's a first record say put background color to something fancy um see right again this is just for a demo and learning purpose in real life you can be more creative however you want this is too dark right so let's take some light color say light green maybe yep okay so this is first record and then we'll say something like same way we'll just add one more local variable here and say last as l okay and here we will write and here again i have copy pasted i am saying if it is last show some other color now this time we are going to choose a light yellow so now you see this is light yellow so now see this is first record it is green this is last record this last recorder right because i am checking ng if it is last l right so that's what we are saying and is it necessary to use this name no you can use any name you want right just give the same name fst so then give here also fst so it's a local variable name you can give any name you want but usually indexes right so we will try and give the first name now similarly if you want to print let's say in a tabular format right and you want to show something like say so i am creating new table again so i am saying even as e odd as o right this is a separate table again i am creating so new table with even and odd right so this is new table with even and dot so now what i am saying is i do not in the previous one we implemented first and last here i am going to do something called alternate rows so i am going to say ng f equal to if it is even then style background color should be say gray right ng if it is odd then make it slight yellowish color now see alternate colors right now just add more data and you will see more magic most of the times this is how we will print the data if if at all whenever you work with any dashboard tabular format in real applications also this is what we do right so it's not any different so now you see i increased the data it recognized this as first this is last you see odd even odd even odd even right so that's how you can implement uh various different techniques um in the for loop right so importantly um what you have learned is uh how to use ng4 and you have used how to learn uh you have learned how to use the local variables right uh in an array namely index first last even and art right i hope it's clear to you do start practicing with me so that i can help you if you run into any issues right soon we'll we'll also do a small mini live project in one or two episodes then we will use all of this to club together to build a beautiful application trust me you will learn a lot by doing live projects then learning just individual pieces but this is also important so keeping that in mind um this we have seen the local variables first last even odd uh in the next episode i will cover about ng switch and then probably will be doing a small mini live project to kind of get up or set up our application get it up and running all right thank you so much for joining i hope you are enjoying the series if you are do hit the like button don't forget to subscribe to my channel thank you so much bye

Channel: ARC Tutorials

Views: 7,703

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular ngFor tutorial

Id: D68VxkfMDSw

Length: 13min 3sec (783 seconds)

Published: Fri Nov 13 2020