Understanding the Purpose of a Component and Its Basic Parts (Template, Class, Metadata)

Aug 6, 2019 • 11 Minute Read

Introduction

Component is a widely used term nowadays, and more and more people are using components and their various properties. So let's see what they are and how we can use them.

What is a Component in Angular?

A component in Angular is a crucial and fundamental building block for the application. Every Angular application may have a tree of different components that are categorized based on the functionality being implemented by the component.

Angular follows component-based architecture, meaning that every Angular application should contain at least one component to be able to run the Angular app. It uses an MVC (Model View Controller) pattern where the view will be managed by the component because the View (HTML) will be rendered based on the data provided by the component.

In short, the component is everything in Angular; thus, it is just a kind of component directive that can be created using the Class keyword.

Why Should You Use Components?

There are many reasons, but here are a few of the major ones.

Simplify component-based architecture
Component reusability
Component-based development enhances the overall app performance
Easy to do the error handling

Component Metadata

Let's see a simple example of what the component decorator looks like.

demo-app.component.ts

      @Component({
  selector: 'demo-app',
  templateUrl: './demo=app.component.html',
})
    

Here, in the above example, we can see that the component class has a decorator called @Component, along with the different properties like selector and templateUrl.

What Is the Component Metadata in Angular?

Component metadata holds the complete information about the current component, which represents the single unit as a component, along with its content like business logic and the view configuration.

To represent the data, we should use some properties which are explained below.

Selector

This is the unique identifier for the component which is used to render the component whenever the URL for the same component can be found along with its view.

If we want to render any component, then it is one of the mandatory types of metadata to use with a component decorator.

templateUrl

It is the URL of the view file (HTML) which represents the visual part of the specific component. Basically, the template URL can contain the URL of an HTML file which is maintained alongside the component.

Template

We have seen the metadata templateUrl which accepts the URL path of the view file, but it's not mandatory to use a separate file all the time to represent the view.

We can also specify the view content directly into the component using template metadata.

Providers

Basically, it is an array of value for the providers which is used to provide the services which are being used by the current component. Thus, it is not a required property, so we can ignore it if we don't need it.

How to Create a Component in Angular

We can create a component in different ways and one of those ways is to use Angular CLI with the below command.

      ng new component <component_name>

For example:

      ng new component app

This is the basic command which is used to create the component in Angular. Now, let's see what our new component will look like.

Code of App the Component (app.component.ts)

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

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Hello World in Angular';
}
    

Above is our component file. Along with the decorator, we have used templateUrl which represents the view of the current component The view file will look like this:

Code of View (app.component.html)

      <p>
  Hello Angular: {{name}}
</p>
    

As you can see, in the view file, we just have plain text to be displayed. Thus, we can play around with the HTML content, based on our business requirements.

Component's Template

In order to render the view of the component, we need to define different HTML controls. It is possible in Angular 2+, and is called View. View is simply an HTML file of a specific Angular component.

We can create an HTML file along with the component in two different ways. These are explained below.

First Approach

The first way is to create an HTML file and pass the URL of the file, like this:

Demo.component.html

      <table border="5">
  <!-- First Row -->
  <tr>
    <td>Column 1 Row 1</td>
    <td>Column 2 Row 1</td>
    <td>Column 3 Row 1</td>
  </tr>
  <!-- Second Row -->
  <tr>
    <td>Column 1 Row 2</td>
    <td>Column 2 Row 2</td>
    <td>Column 3 Row 2</td>
  </tr>
</table>
    

After creating the above HTML file, we can pass the template URL to the component, like this:

Demo.component.ts

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

@Component({
  selector: 'demo',
  // Passing template URL
  templateUrl: './demo.component.html',
})
export class AppComponent {
  name = 'Using template in Angular';
}
    

As we can see that there is metadata property called templateUrl which accepts the URL of the template (view) of a component and renders the HTML content to the browser

Second Approach

The second approach is to generate the component using the Angular CLI command where the template (view) file will be created automatically. Below is the simple command to generate a test component.

      ng new component test

After executing the above CLI command, we can see that there are three different files that are created automatically. They are listed below.

Test.component.ts
Test.component.html
Test.component.css

When we open the test.component.html, there is a <p> tag auto-generated, and it will be rendered while running the Angular app.

These are the two different approaches to render the template of a component, but we can also write the inline HTML content inside the component itself.

Inline Component Template

To write the template content inside the component itself, we can make use of template metadata.

It accepts the HTML content, just like how we use different HTML controls inside the separate file, but the difference is that, if we have a small number of elements, then we don't need to create a separate file and specify it within the component.

Make sure that you specify the HTML content using the back-tick (``) along with the HTML elements, as described in the below example.

my-app.component.ts

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

@Component({
  selector: 'my-app',
  // Inline template
  template: `<div>
    <p>This is inline template demo
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Hello World in Angular';
}
    

In this example, we have used template metadata property to specify an inline template within our Angular component, but it is recommended to use a separate HTML file if you have meaningful HTML content to be rendered. Otherwise, it will be tough to manage template and business logic into a single component file.

Component Style

Styling a component is the crucial building block which directly targets the user's acceptance of the application - yes, the User-Experience.

The Angular component allows us to provide a way for styling the component. This means that we can provide different CSS styling, rules, and other device-specific style configuration for a specific component.

For that, the Angular component has metadata properties based on your different needs and requirements. These are explained below.

styleUrls

The TemplateUrl property accepts the URL of the stylesheet file where we have written the styling rules for different HTML elements.

We can provide a template style's file URL into a component like this.

my-app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  // Using stylesheet URL
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Styling Component in Angular';
}
    

Here app.component.css is the stylesheet file where we can write different CSS rules and guidelines for the HTML elements and can apply it to the component like this.

Inline Component Styles

We can also specify inline CSS rules in the component itself, if we only have a few rules to be applied to the Angular component.

For that, we can use styles metadata property, along with the component decorator, like this:

my-app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
    <table border="5">
      <tr>
        <td>Column 1 Row 1</td>
        <td>Column 2 Row 1</td>
        <td>Column 3 Row 1</td>
      </tr>
    </table>
  `,
  // Using inline styles
  styles: [
    `table  {
        color: purple;
        width: 100 %;
        height: 100px;
      }',
      'table  tr {
        color: skyblue;
      }`
  ]
})
export class AppComponent {
  name = 'Styling Component in Angular';
}
    

As we can see, we have specified inline styles for the table element created into the template. We need to specify the styles for the elements inside the styles array.

Create an Angular App with Stylesheet

When we create a new Angular app using the CLI command, we have multiple stylesheet options to choose from. These are listed below.

CSS
SCSS
SASS
LESS

After selecting the stylesheet option, we can create separate files for that, we can design our components using the same stylesheet type. But we can also specify the stylesheet type while creating the new Angular app using the below CLI command.

      ng new demo-app --style=less

Here we have specified less, but we can also specify the type of stylesheet based on our choice.

Summary

I hope you have now a good understanding of components in Angular and how to use them.As I mentioned, Angular is component-based, and this guide gives you a birds-eye view, but there's still more to learn to master them.

To learn more on Angular, please follow my other guides on Angular and stay tuned for upcoming guides.