Made withAngularClip

Angular Tutorial - 4 - Components

C

Codevolution

Creator on the Angular channel

Watch on YouTube ↗

1M viewsNov 20, 201713:22 runtime

Learn the fundamentals of Angular components, the core building blocks of any Angular application. This tutorial breaks down the three essential parts of a component: the HTML template for the view, the TypeScript class for logic and data, and the metadata defined with the…

Chapters

#angular#clip#frontend

What is an Angular Component?

An Angular component is a fundamental building block of an Angular application. It controls a patch of the screen called a view and is composed of three main parts:

Template: The HTML that defines the component's view or user interface.
Class: The TypeScript code that contains data (properties) and logic (methods) to support the view.
Metadata: Extra information for Angular, defined using a decorator, that tells Angular how to process the class.

The `@Component` Decorator

The @Component decorator is a function that attaches to a class and provides metadata, identifying it as an Angular component. Key metadata properties include:

selector: A CSS selector that tells Angular to create and insert an instance of this component where it finds the matching tag in template HTML.
templateUrl: The path to an external HTML file for the component's view.
styleUrls: An array of paths to external CSS files for component-specific styles.

Generating Components with Angular CLI

You can easily create a new component using the Angular Command Line Interface (CLI).

Tip
Use the command ng generate component <component-name> or the shorthand ng g c <component-name> to generate all the necessary files for a new component.

This command automatically:

Creates a new folder for the component.
Generates the component's .ts, .html, .css, and .spec.ts files.
Imports the new component into the parent app.module.ts file and adds it to the declarations array.

Component Selectors

A component's selector determines how it is used in a template. There are three ways to define a selector:

By element name (default): selector: 'app-my-component' is used as <app-my-component></app-my-component>.
By class name: selector: '.app-my-component' is used as <div class="app-my-component"></div>.
By attribute: selector: '[app-my-component]' is used as <div app-my-component></div>.

Inline vs. External Templates & Styles

While templateUrl and styleUrls are common for linking to external files, you can also define your template and styles directly within the component's TypeScript file.

Inline Template: Use the template property instead of templateUrl.
Inline Styles: Use the styles property (an array of strings) instead of styleUrls.

Note
For multi-line inline templates or styles, use backticks (`) instead of single or double quotes. This improves readability.

Component Nesting and Registration

Components can be nested inside other components, creating a tree-like structure with a single root component (usually AppComponent).
Every component must be declared in an NgModule before it can be used. The Angular CLI handles this automatically for you by adding it to the declarations array in app.module.ts.

The Three Parts of an Angular Component

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 a component, we use the component decorator.

So if we put together a template, a class, and some metadata, we get an Angular component.

Anatomy of the Default App 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 app.component.ts. At the bottom, we have our class. The name of the class is AppComponent. 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.

The component decorator is basically a function that attaches to the class right below it, and in our case, it is attached to the AppComponent class. And it is this decorator that tells Angular, "Hey, this is not a plain 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 templateUrl, 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 component's template in its place. So for our hello world example, you can see the selector for AppComponent is app-root, and in our index.html file, it is used as a custom HTML tag. So <app-root> in the opening and closing tag. So Angular renders the AppComponent's template when it comes across this app-root selector.

But what exactly is the template for this component? That is defined using the templateUrl. The templateUrl points to an HTML file that represents the view for this component. And if we take a look at app.component.html, in our template we have "Welcome to" 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 app.component.html, gets replaced in the index.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 styleUrls property, which points to CSS files. Right now this file is empty, but you can style your component using this file. So that is basically the structure of a component and how you include it in your application.

Generating a New Component with Angular CLI

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 integrated terminal at the bottom of our screen, we are going to run the command ng g for generate, c for component, followed by the 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 TypeScript file, the HTML, and the CSS are created. A spec file for testing is also created, but we don't really need this, so I'm going to delete it. And you can notice even though we named our component as just test, .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!" is 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 TestComponent 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 TestComponent is already imported and added to the declarations array, 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.

Using the New Component's Selector

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.ts, you can see that the selector for the test component is app-test. So let's go back to app.component.html, which represents the view for AppComponent, which is the root 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 AppComponent, and all the other components will fall under this AppComponent. 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 Codevolution" 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.

Exploring Different Selector Types

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.ts 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 specify 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 to this div tag we can have a class="app-test". Now if you save this and head over to the browser, you can see that our application still works fine. "test works!" 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.

Using Inline Templates and Styles

The next thing we can change is the template. Now if you notice, we have the templateUrl property which points to the file that contains the HTML, test.component.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 templateUrl to just template. And now we can specify the HTML right here. So within single quotes, 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 backticks. And this is the key just below the Escape key and above the Tab key. So replace the single quotes 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.

The next thing we can change is the styleUrls property, which points to the CSS files. But just like the HTML, you can have the CSS inline as well. So instead of styleUrls 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 going to have backticks, split it into multiple lines and add a style to the div element. So div { color: 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.

Summary and Key Takeaways

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.