Video Tutorials

Policy

Twitter LogoFacebook Logo
Angular: Components
Learn what are Angular Components, how to create them, and put it in HTML.
By: King

Be sure to check out the What is Angular tutorial if you do not know what is Angular.

To follow the rest of the tutorial, you will need to know how to setup and start an Angular project. If you do not know yet, visit: 

Angular components comprise of 3 main files: 

1. A HTML file that structures how our component might look


2. A stylesheet file to decorate our HTML

3. A class file with properties, methods, and metadata that describes the behavior of our component

Image from Codeible.com

Creating a component

Lets begin by creating a component. Open your Angular project on VS Code. 

If you have the Angular CLI installed, execute the ng generate component command followed by the name of the component to create the boiler files and code for a component in the terminal.

ng generate component profile

If you are curious of how to open the terminal in VS code, press and hold on the ctrl key and then press the tilde key on the keyboard. The tilde key is located left of the 1 key.

Ctrl + `

Upon completion of the command, expand the app folder in the explorer section of VS code. you will see that a folder is generated with the name you have given the component. Inside that folder, you will see the 3 files – the HTML, CSS, and Class files.

Image from Codeible.com

When we use the Angular CLI command – ng generate component, it will generate some boiler plate code, just enough for our component to work. If we look inside the HTML file of our component, there is a paragraph tag with a message.

<p>profile works!</p>

That is what will be displayed when we put add our component to the application.

Lets try adding this component in our app. But first we need to understand how Angular displays its components. 

When we load our Angular application on to the browser, the browser will look for the index.html page an render whatever is in it. That file is located inside the src folder of our project. 

Image from Codeible.com

If we take a look inside, you will see a bunch of HTML code. But what you need to focus on are  the <app-root> tags inside the body.

<!doctype html>
   <html lang="en">
   <head>
     ...
   </head>
   <body>
     <app-root></app-root>
   </body>
</html>

They came from a component. When we generate our project using the ng new command, it will create a component call app. Then it will place that component inside that page so that it will get rendered onto the screen as well.


What’s really happening is that the browser is rendering our index.html page, and because we included the component inside the page, it also gets rendered on to the screen.

Lets take a look inside the app component and look inside the typescript file of the app component. There is a class with a @component decorator.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}

The @component decorator tells us some metadata about our component – data like what name is it called and which  files are used.

The selector is the name we use to place our component inside of a HTML file. If you recall, app-root is inside the body of the index.html page.

The templateUrl represents the location of the HTML file for our component and the styleUrls represents the location of the stylesheest that are used in the component. 

Lets use the same logic for adding our components to the application. First, look for the class file for component that was created earlier in this tutorial and look at the value of the selector property. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

}

Next, go to the app component html page and remove all the generated code. Select all the code and delete it. Then add our component inside the page using the angle brackets syntax for adding a html element.

<app-profile></app-profile>

The app component html page is being rendered on the browser because we included it in the index.html page. Since we included our component inside the app component html page, it will also get rendered. 

Image from Codeible.com

Let’s verify that. Save the project and then start the local server for our project by running the ng serve command on the command prompt or terminal.  

ng serve

Once the server is ready, go to localhost:4200 on the browser and we will see a text on the screen.

profile works!

Reusing Components

We can also reuse the component by adding more of it. Go back VS Code and add another component to the application. Add another app-profile tags in the app component html page. Then save and go back to the browser

<app-profile></app-profile>

<app-profile></app-profile>

Now there are 2 lines of text. As you can see, with components, we can break our code into modules that we can then include in our application whenever we need to use it.


We can easily go to a particular component and modify the code if we need to. It makes our code a lot easier to maintain.

Recap

Let’s take a moment to recap what we have learned.

1. We learned that Angular components comprise of 3 main files – a HTML, CSS and TypeScript file

2. We know how to create a component using the ng generate component command and how components gets rendered on to the screen.

3. We learned that we have to look inside of the component decorator to know what name we need to use to place the component in a HTML file

4. And lastly, we learned how to place the component in a HTML file by using the angle bracket syntax


Sign In