CodeWithVijay: Angular Component

Components are one of the basic building blocks of the Angular framework. In this article, you will see how to build an Angular component from scratch.

Before jump into creating a component, you should be familiar with how an Angular application is bootstrapped. Let’s bisect a sample Angular application generated by Angular CLI. After installed Angular CLI let’s create a new project using below command,

ng new first-app

While initializing app I have disabled routing and all others made it default as we are building a simple app here.

Now CLI has created a new project structure which looks like this,

Before bisecting let’s load the application in the browser. For that use the below command in the terminal from your project root,

ng serve

Load the URL http://localhost:4200/ and now should able to see the app is running. When you look at the page source you would able to see only element loaded is <app-root></app-root>,

When you load the application the page loaded would be index.html and when you open index.html you would be able to see <app-root> is added there,

So what is app-root? <app-root> is nothing but a built-in Angular component. I know it doesn’t make any sense for you. No worries by end of this article everything will be clear for you, I swear.

Let go step by step how an Angular application loads,

Step 1:- The entry point to any Angular application is Main.ts. So open Main.ts file and there you would be able to see a piece of code,

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

Here is where Angular get an instruction to load something called ‘AppModule’ by the function call,

platformBrowserDynamic().bootstrapModule(AppModule)

When you look at the project files you would be able to see a file named ‘app.module.ts’. The name looks similar to AppModule so let’s open that file. There you can see a class named ‘AppModule’ and we are clear which is what bootstrapped in Main.ts. In AppModule class you can there is something else bootstrapped, which is ‘AppComponent’. What is that?

Let’s go back to the project again and there we can see a file named ‘app.component.ts’ which looks similar to the name AppComponent so let’s open it. There you can see a class ‘AppComponent’ which is definitely what we have seen in the ‘AppModule’ class. But here we can see something special. Something wrapped in @Component({}) decorator. Looking at the ‘selector’ inside ‘Component’ decorate we can see something called ‘app-root’ which is exactly what we have seen in the index.html.

It means Angular has built a custom component name ‘app-root’ and which is loaded in index.html. But from where did the HTML of ‘app-root’ came from? Simple you can see something called ‘templateUrl’ which is assigned to ‘app.component.html’ so let’s open it.

We can see a big piece of HTML in app.component.html. Is that what we have seen while loading the page? To make sure let’s clean up everything in ‘app.component.html’ and add just a header,

<h1>This is app component</h1>

Save it and as ng serve identified the change it will reload the page. Ahaaa now you can see page has loaded with the header we have added,

Now the picture is clear to you how Angular bootstrapped its built-in component. So the question is how to create a component our own or how to create a custom component? Let’s do that now.

Let’s create a folder named ‘shoppingList’ under app folder as we are going to create a shoppinglist component.

A component is nothing but a TypeScript class decorated with a decorator @Component. So the first thing to do is to create a class named ‘ShoppinglistComponent’ under shoppingList folder and decorate it with ‘@Component’ like below,

import { Component } from '@angular/core';@Component({
selector: 'app-shoppinglist',
templateUrl: '',
styleUrls: []
})export class ShoppinglistComponent {}

Few important things to understand here,

‘@Component’ should be imported from ‘@angular/core’
Under @Component, you have noticed three attributes, selector, templateUrl and styleUrls. ‘Selector’ would be used as an HTML element in other parts of the application like we have seen <app-root> before. ‘templateUrl’ is the URL of the HTML file of the selector ‘app-shoppinglist’, which don’t have created yet. ‘styleUrls’ is an array of CSS URLs to define the style of this component. As I am not creating any custom styles I will leave ‘styleUrls’ array empty. Now let’s create an HTML template for this component and assign it to ‘templateUrl’.

Under the same folder ‘shoppingList’ let’s create another file ‘shoppingListComponent.html’ and add a sample shopping list,

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Milk</li>
</ul>

And assign templateUrl with the new HTML template,

import { Component } from '@angular/core';@Component({
selector: 'app-shoppinglist',
templateUrl: 'ShoppinglistComponent.html',
styleUrls: []
})export class ShoppinglistComponent {
}

The component is ready but how to use it? Now we know we can use the component by simple add <app-shoppinglist></app-shoppinglist> in the appComponent.html (As this is the only root component we have now). So let’s add it and see if it works. Immediately after I have added the <app-shoppinglist’> my IDE throws an error,

Let’s ignore IDEs warning and try to build the app with ‘ng serve’ command (Make sure Angular CLI installed using the command ‘npm install -g @angular/cli’ ). Ahaa we got the same error while building the app. So definitely something wrong.

It means Angular is not identifying the new component we have created. But why? Well, for Angular to be able to identify any components it should be registered in the declarations section of app.module.ts as below,

Now everything looks fine so let’s run it and see the output. Perfect we can see the new component is rendering now

You can get the full source code here. This is how you create everything manually but there is a command which does everything for you. For example, if you want to create a component ‘order’ the simply run the command,