Angular Components

In this tutorial, we are going to look at Angular Components. We will look at the building blocks of the components and the important metadata properties of Angular Components like selector, template, styleURL, etc. We also show you how to create a simple component in Angular.

This tutorial is a continuation, of the tutorial Create Your First Angular Application. You can download the source code from the GitHub Repository.  The starting code is found under the folder Getting Started and final source code is in the folder Components

What is an Angular Component

The Component is the main building block of an Angular Application.

The component contains the data & user interaction logic that defines how the View looks and behaves. A view in Angular refers to a template (HTML).

The Angular Components are plain javascript classes and defined using @component Decorator. This Decorator provides the component with the View to display & Metadata about the class

The Component is responsible to provide the data to the view. The Angular does this by using data binding to get the data from the Component to the View. This is done using the special HTML markup knows as the Angular Template Syntax. The Component can also get notified when the View Changes.

The Angular applications will have lots of components. Each component handles a small part of UI. These components work together to produce the complete user interface of the application

The Components consists of three main building blocks

  • Template
  • Class
  • MetaData
Building Blocks of Angular Component Template, Metadata and Class

Building blocks of the Angular Component

Template (View)

The template defines the layout of the View and defines what is rendered on the page.  Without the template,  there is nothing for Angular to render to the DOM.

The Templates are created with HTML. You can add Angular directives and bindings on the template.

There are two ways you can specify the Template in Angular.

  1. Defining the Template Inline
  2. Provide an external Template

Class

The class is the code associated with Template (View). The Class is created with the Typescript, but you can also use javascript directly in the class. Class Contains the Properties & Methods.

The Properties of a class can be bind to the view using Data Binding.

The simple Angular Class

The Component classes in Angular are prefixed with the name “Component”, To easily identify them.

Metadata

Metadata Provides additional information about the component to the Angular. Angular uses this information to process the class. The Metadata is defined with a decorator.

A decorator is a function that adds metadata to class, its methods & to its properties. The Components are defined with a @component class decorator. It is @component decorator, which defines the class as Component to the Angular

@Component decorator

A class becomes a Component when Component Decorator is used. A Decorator is always prefixed with @. The Decorator must be positioned immediately before the class definition. We can also build our own decorators. The decorators are Similar to attributes in C#

Important Component metadata properties

Selector

Selector specifies the simple CSS selector, where our view representing the component is placed by the Angular.

Providers

The Providers are the services, that our component going to use. The Services provide service to the Components or to the other Services.

Directives

The directives that this component going to use are listed here.

Styles/styleUrls

The CSS Styles or style sheets, that this component needs. Here we can use either external stylesheet (using styleUrls) or inline styles (using Styles). The styles used here are specific to the component

template/templateUrl

The HTML template that defines our View. It tells Angular how to render the Component’s view. The templates can be inline (using a template) or we can use an external template (using a templateUrl). The Component can have only one template. You can either use inline template or external template and not both

Creating the Component

We have already shown how to create the Angular Application using Angular CLI in how to create first Angular application tutorial.  The Angular CLI has automatically created the root component app.component.ts.

In this tutorial, we will not create the Angular Component, but let us see the Component creation process in detail. The creation of the Angular component requires you to follow these steps

  1. Create the Component file
  2. Import the required external Classes/Functions
  3. Create the Component class and export it
  4. Add @Component decorator
  5. Add metadata to @Component decorator
  6. Create the Template
  7. Create the CSS Styles
  8. Register the Component in Angular Module

1. Creating the Component File

The Component app.component.ts. is already been created for us by Angular CLI under the folder src.

By Convention, the file name starts with the feature name (app) and then followed by the type of class (component). These are separated by a dot. The extension used is ts indicating that this is a typescript module file.

You can read more about naming conventions from the Angular Style Guide

2. Import the Angular Component Object

Before we use any Angular (or external) functions or classes, we need to tell Angular how and where to find it. This is done using the Import statement. The Import statement is similar to the using statement in c#, which allows us to use the external modules in our class

To define the Component class, we need to use the @Component decorator. This function is found in the Angular core library. So we import it in our class as shown below

3. Create the Component Class and export it

The third step is to create the Component class using the export keyword. The Export keyword allows this component class to be used in other components by importing. The AppComponent class is shown below

Note we are using Pascal case naming conventions for the class name. In the above class defines a Property named title and assign a default value “app”

4. Add @Component decorator

The next step is to inform the Angular that this is a Component class. This is done by adding the @Component decorator to the above class. The decorator must be added immediately above the class as shown below

5. Add meta data to @Component decorator

The next step is to add the metadata to the @component decorator. Add the following to the component metadata

selector

The angular places the view (template) inside the selector app-root

templateUrl

In the above example, we have used an external template using templateUrl metadata. The templateUrl points to the external HTML file app.component.html.

styleUrls

Defines the styles for our template. The metadata points to the external CSS file app.component.css. The Component specific CSS styles can be specified here

6. Create the Template (View)

Template is nothing but an HTML file, which component must display it to the user

The Angular knows which template display, using the templateUrl metadata, which points to app.component.html.

By Convention, the file is named after the component file it is bound to with HTML extension.

This is a simple HTML file, except for the initial h1 tag

Note that title inside the double curly bracket. When rendering the view, the Angular looks for title Property in our component and binds the property to our view. This is called data binding.

The double curly bracket syntax is known as interpolation, which we will look at in our next tutorial

7. Add the Styles

The next step is to add the CSS Styles. The styleUrls metadata tells Angular, where to find the CSS File. This property points to external file app.component.css

By Convention, the file is named after the component file it is bound to with .css extension

Note that styleUrls metadata can accept multiple CSS Files.

8. Register the Angular Component in Angular Module

We have created the Angular Component. The next step is to register it with the Angular Module

The Angular Module organizes the components, directives, pipes, and services that are related and arrange them into cohesive blocks of functionality.

It is a class that is adorned with @ngModule decorator

We use @NgModule class decorator to define a Module and provide metadata about the Modules.

We add all the components, pipes and directives that are part of this module to the declarations array. We add all the other modules that are used by this module to imports array. We include the services in the providers’ array.

The Component that angular should load, when the app.module is loaded is assigned to the bootstrap property.

The AppComponent imported

and then added to the declarations array.

We want appComponent to be loaded when Angular starts, thus we assign it to bootstrap property

Thats it

Finally, run the application from the command line using ng serve ( or npm start). You should see this

Creating the inline Template & StyleUrls

In the above example, we have used the external template & Styles.

We can also specify the Template, Styles inline using the template and styles property of @Component metadata as shown below.

The Template can get pretty long. In the case of a Multi-line template, you can use BackTicks) to enclose the template string.

Specifying the Templates and styles inline has few disadvantageous. The Template can get pretty big and clutter your code. You will also not get the IntelliSense help while editing the template. In such a case you can write your Html template in an external file and link that file in your component code.

The component selector

The Angular renders the components view in the DOM inside the CSS selector, that we defined in the Component decorator

The selector <app-root></app-root>  is in the index.html (under src folder)

When we build Angular Components, we are actually building new HTML elements. We specify the name of the HTML element in the selector property of the component metadata.  And then we use it in our HTML.

The Angular, when instantiating the component, searches for the selector in the HTML file and renders the Template associated with the component.

That gives several options to use our component selector

Using the CSS class name

And in the HTML markup use the CSS class name

Using attribute name

And you can now the attribute as follows

Using attribute name and value

now you can use it as follows

Summary

We looked at how to create an Angular Component in this tutorial.  In the Next Tutorial, we look at How Component communicates with the View using Data Binding

5 thoughts on “Angular Components”

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top