Angular Tutorial - 4 - Components

okay guys in this video we are going to learn the basics of a component we are going to understand what exactly makes up a component and how we can add a new component to our angular application a component is made up of three parts the first one is a template which represents the view this is created using HTML it will be the user interface for your application next we have a class which is nothing but code that supports the view and this is created using typescript the class like any other programming language contains data properties and methods that can be used to control the logic of the view for example we can have a method to show or hide an element based on the value of a property finally a component also has some metadata attached to it and this is the information that angular needs to decide if the particular class is in fact an angular component or just a regular class the metadata is defined using a decorator which is a feature in typescript a decorator is just a function that provides information about the class attached to it and for component we use the component decorator so if we put together a template a class and some metadata we get an angular component now let's try to relate this to the app component that we have in our hello world angular application so let me go back to visual studio code and open the file AB component dot tears at the bottom we have our class in the name of the class is AB component this class currently contains one property which is the title and does not contain any methods keeping it simple to this class we have the metadata attached in the form of a decorator and to be more specific the component decorator and the component decorator is basically a function that attaches to the class right below it and in our case it is attached to the app component class and it is this decorator that tells angular hey this is not a plane class this is a component the component decorator contains both the metadata and the template which represents the view so as part of the metadata we have a selector a template URL and styles the selector is basically a custom HTML tag that can be used to represent this component when you specify a selector in your HTML angular renders the components template in its place so for our hello world example you can see the selector for app component is app root and in our index dot HTML file it is used as a custom HTML tag so absolute in the opening and closing tag so angular renders the add components template when it comes across this a bruit selector but what exactly is the template for this component that is defined using the template URL the template URL points to an HTML file that represents the view for this component and if we take a look at AB dot component dot HTML in our template we have welcome - followed by the title in double curly braces and the title is nothing but the property in our class which is code evolution so when we run the application this HTML which is in AB dot component dot HTML gets replaced in the index dot HTML file where you specify this component selector so that is how the HTML template gets rendered in the browser and finally we can have styles that apply only to this component and that is specified using the style URLs property which points to CSS files right now this file is empty but you can study your component using this file so that is basically the structure of a component and how you include it in your application but let's try to improve our understanding of components let's create a new component and add it to your application and also make some modifications now to create a new component we will again use angular CLI so in the integrator terminal wait at the bottom of a screen we are going to run the command in G G for generate C for component followed by name of the component let's call this test now when this command completes execution a couple of things happen and you can see them in the integrated terminal itself first you can see that four new files were created and also there was an update to the app module so let's take a look and see what happens in the folder itself so in the app folder a new folder called test is created specifically for this component within this folder the type grid file the HTML and the CSS are created a spec file for testing is also created but we don't really need this so mmm deleted and you can notice even though we named our component as just test dot component is automatically added this is the convention to naming components in angular and angular CLI follows that and if we take a look at the HTML file test works as typed out for us and test is basically the name of the component so we have now created a new component but anytime you create a new component your application should be aware of it so in the app module file we import the test component and then add it to our declarations array this array which is the declarations array contains all the components used by the application now if you notice the test component is already imported and added to the declarations alley courtesy of our friend angular CLI so with just a single command you can generate a new component that is ready to be used in your angular application now to include this component in your HTML we just add a custom HTML tag that represents the selector and if you go back to test component es you can see that the selector for the test component is app - tests so let's go back to AB dot component HTML which represents the view for app component which is the route component of our application and over here I'm going to remove the unordered list remove the h2 tag remove the image and over here I'm going to include the custom HTML tag app - test and remember our angular application will have one root component which is the app component and all the other components will fall under this app component and that is why we include app test inside app component HTML so if we save this now go back to the integrated terminal and at the bottom of your screen type the command NPM start or ng serve it is going to start your application and if we head to the browser and click on the refresh button you can see welcome to code evolution displayed which is the template for the app component and also test works which is the template for the newly added test component so we have successfully added a new component to our angular application now let's see what are some of the changes that you can make to any component so let's head over to test component es and over here let's begin with the selector there are in fact three ways to specify the selector the first one is what we have seen already we specified the selector app - test and use it as a custom HTML tag the second way is to use it as a class so begin your selector with a dot character and you can use this selector as a class name so instead of app - test as a custom HTML tag we can have a div tag and - this div tag we can have a class is equal to app - test now if you save this and head over to the browser you can see that our application still works fine test words is displayed in the browser and finally the third way to specify is to enclose a selector within square brackets so square brackets around app - test and then in our HTML we need to use app - test as an attribute so instead of the class attribute we specify app - test as the attribute to this div tag so now when you save this and the browser refreshes you can see that the application still works fine test works is still displayed on the browser so there are three ways to specify the selector for your component the next thing we can change is the template now if you notice we have the template URL property which points to the file that contains the HTML test dot component dot HTML but in any component it is also possible to specify the template inline meaning in the same typescript file and for that we use the template property so you can change template URL to just template and now we can specify the HTML right here so within single codes I can have a div tag that says inline template and if we save this and head over to the browser you can see that the browser now displays inline template but sometimes your inline HTML might span a couple of lines and for that we make use of back tags and this is the key just below the Escape key and above the tab key so replace the single codes with backticks and now I can write multiple lines of HTML and it still works so if you save this and head over to the browser you can see that the template is still working fine inline template is being displayed now possibly for the first half of this series I will be making use of inline templates meaning I will be writing HTML in the typescript file itself now there are two reasons the first reason is you can see both the class and the template at the same time which will help you to understand concepts about data binding easily second I don't have to jump between the HTML and the typescript files every time I have to make a change so we will be learning more about templates in the upcoming videos now the next thing we can change is the style URLs property which points to the CSS files but just like the HTML you can have the CSS inline as well so instead of style URLs property we can just have the Styles property and this will be an array and again we can make use of backticks to specify multiple lines of CSS so we're gonna have backticks split it into multiple lines and add a style to the div element so div color is going to be let's say red now if we save this and head over to the browser you can see that the inline template is now being displayed in red color so just to quickly summarize what we have learned so far components are building blocks of angular applications a component contains a class a decorator and the template which represents the view any new component has to be imported and added to the module in the declarations array you can then include the selector in your HTML either as a custom tag or as a class or as an attribute the HTML and CSS can either be in a separate file or they can also be in line in the typescript file we can make use of backticks to specify multiple lines of HTML and CSS the component class contains data that can be displayed in the view and finally it is possible to nest components within other components and also reuse them when required alright that's pretty much the basics of a component in angular thank you guys for watching don't forget to subscribe and I'll see you guys in the next video

Channel: Codevolution

Views: 699,959

Rating: 4.9147696 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Angular Components, Angular 5, Angular 5 Tutorial, Angular 6, Angular 6 Tutorial

Id: 16rQyEQtpyQ

Length: 13min 22sec (802 seconds)

Published: Mon Nov 20 2017