Angular 17 Tutorial #10 - Components Overview | Angular 17 Tutorial For Beginners

hi friends welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners as well as expert developers who are joining us from previous versions of angular there are a lot of changes uh in angular 17 that even expert developers should know and hence this particular series is equally important to both freshers as well as previous developers on angular versions today we are learning about components in angular this is part 10 of the series make sure that you watch the first Nine episodes especially on angular 17 that would give you a knowledge about end to endend of angular 17 especially the breaking changes today we are learning about components in angular 17 so components are the most fundamental basic building blocks of angular applications forming the UI control so components are nothing but you can think of any smallest granular thing that you want to take can be a component it can be a form it can be a message it can be a alert it can be a button it can have a whole lot of things so basically anything that you want to keep building right a web page can consist of multiple components in one view right so that's what is a component now each component in angular is defined using the at theate component decorator if you open the code and open the basic component class which is app component.ts you can see that it is defined using a at theate component decorator okay so every component in angular is declared using at theate component decorator components have Associated HTML template now if you see this structure okay each component I have told this before I'll repeat it again I'll keep repeating it till you master it okay so all right so number one angular components angular components are declared using at theate component decoration decorator okay remember that every angular component needs to have at the rate component decorator now at the rate component decorator can have multiple inputs inputs or parameters okay now some of the parameters are selector that is the name that you would want the component to have in order to use it everywhere in your templates stand alone by default angular 17 components are Standalone okay so selector selector means it's the name which can be used slash referred in application okay we will see that how to use in this case you're using app Root so if you open your index.html you're calling the component using that particular selector name okay we will dig deep into it as we start this is again something that if you're not following stay the course just understand just hear out what I'm saying all right so selector name is what you will use to define the tag okay then the next one is Standalone by default all by default all angular applications are standalone which means you need not no need to put no need to declare inside a module you can directly start using them anywhere in your application you can directly use them in the application anywhere because they're all Standalone okay we will again touchbase this topic in detail as a separate episode for now let's continue Contin and go through the component decorator Imports now this is where it comes now Imports will you will provide you will provide all required modules for this component now if you want to use routing you will provide router Outlet if you want to use a mat button like how I have used here so then you will need to provide that module here if you want to use something common module you will import it here if you want to use forms you will import the forms module so basically Imports will hold all the modules that this component requires because it's a standalone component so we need to provide everything here then you will have something called template URL template URL is nothing but this is the actual template or you can think of the HTML for the component okay that's what template URL means now you can see here for every component that is created there is one HTML for it if you open the HTML this is the regular HTML file that you have okay so every component will have a template URL it can also have something called template if you want to declare the HTML right here you can do this as well then you need not have this okay so it can either have a template or a template URL where to use you will use template URL when you have lot of code when you have only a one line of HTML you can just use template okay that's the difference between template URL and template use when have only limited HTML okay next you will have style URLs okay style URL now this is nothing but the link to your CSS stylesheet the CSS or stylesheet for the component okay now if you see component do scss in my case because I'm using scss but you if you are using CSS you would have the CSS extension but in any way this component will have style URL which is the link to the CSS or the scss or less file alternatively if you want to declare the inline style you can just directly have it as an array also okay so these are the different options that this decorator can take all right perfect so far so good I hope it's clear so far so you can use Styles Define inline styling okay that's the important thing about component that you should know all right let's go back now components have an Associated HTML template that defines the view for the UI that's what we saw template URL and template right template URL and template which will usually have the HTML extension okay the logic of the component is written in a typescript class handling data and interactions which is your component main class this one okay component.ts Styles specific to a component are defined in CSS or scss files which is what I just showed you style URL or Styles or you can have app component. CSS the next angular components utilize data binding for interaction between typescript class and the template or the view by default angular 17 components are Standalone which means you need not to import them in a module to use them you can directly use them because they are Standalone components communicate with each other using input and output decorators don't worry about these we will cover them as we move in the progress angular provides life cycle hooks now let me touch base a little bit on this one so we saw the angular component decorator we saw all the things inputs that it takes a quick note I'll write component will have ht. HTML which is the template or the HTML or the UI component structure every component will have this they will have a different name obviously like here it would be uh the component name in this case it is app comp component same way you would have dot CSS or scss which is the stylesheet or the component then you would have component do spec. TS which is the unit tests for the component okay you can see that here spec. TS which is the testing file scss is the style HTML is the view and component.ts will be the main file which is the class main class class for the component which holds logic and um data and interactions and Etc all right so that's your basic structure of any component that you would see in angular now remember by default all components are Standalone which means use them anywhere where anywhere in the application without modules applications no need to inject in a module okay now this is angular 17 onwards remember that not the earlier versions all right so this is all you should know about components okay now there are um input and at theate output which is used for sending data and receiving data okay so component data flow right so we I will cover each one of this in detail with live coding so don't worry about it for now you're trying to get a big picture of component you're trying to understand what is a component in the angular application input used for uh sending data to the component and output is sending data from the component back right so this is input means you're sending data to the component output means sending data from the component remember this very very important now components have something called Data binding which means the data you declare in in your class will go to template and back to class right in in this particular structure think that data will go from component.ts to template and back to component okay that is called Data binding I'll cover these in detail again like I'm saying don't freak out too much uh listening these Buzz words because each one of this I promise I'll cover in detail for you today is not that day today you are understanding the capability and what exactly is a angular component okay remember these are very very basic building blocks of angular we will also go through something called components life cycle methods every component right from creation to destruction destroy in between there are many stages that that will happen Okay like on load NG on inet NG on content view on in it view on in it and much much more there are eight stages that it goes through we will cover each one of them in detail okay now a quick word on that so if you say implements NG on in it you will Implement that now it says we have not implemented it so see so this is one of the life cycle method called NG on in it that means once the component is initialized what should be done G on right now there can be many many stages so don't worry about that we will go into detail but for today NG On in It content view in it change changes etc etc there are lot many things that we will cover that's all I will leave you today not I'm not going to overload you with too many things because as we move you will come across all of this like components are smaller pieces so they are easily unit testable that's why we have a spec file we will talk about NG content when we talk about content projection we'll talk about Dynamic loading of components also and much much more all right so we'll get started in The Next Episode by learning how to generate components okay for today's episode the takeaway is this all this notes that I created you make sure that you go through them that's what will give you a complete thorough understanding of components in angular in the next episode we'll start buting out code by starting with generation of components I'm trying to make things as easy as possible I but if any case you have any doubts please write to me in the comment section I always willing to help you thank you so much for liking my videos thank you so much for giving so much love to me and my channel keep supporting me in future as well and I'll see you in the next episode we'll learn about generating components thank you so much for joining see you in the next episode

Channel: ARCTutorials

Views: 8,721

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, components overview

Id: VRQi3pQS5qA

Length: 15min 24sec (924 seconds)

Published: Mon Feb 05 2024