|

Angular Root Component Tutorial

angular root component

In this tutorial we’ll learn about how Angular bootstraps an application to get running. This happens by a combination of the root module and the root component working together. The root component is the very first component that is referenced and hosted in the main index.html web page. Everything else in Angular builds off of this root, so it helps to take a close look at how this root component works.


Angular Root Component

When you create a new project in angular, where is the root component? If you use the Angular CLI to scaffold the project for you, an app component is created as the root component for you. it consists of an app folder and the files needed for that angular component.
angular root app component


Defining The Component Class

We can delete the default markup in the app.component.ts file as we are going to start from scratch. We first start by defining the class. The export keyword allows us to make use of this class in other parts of the application. The pageTitle property will be used to set up the title of a page.


Define The Component Decorator

Next we want to define the Component Decorator, and this goes right above the class definition.

Depending on the IDE you are using, you might see a message that states ng: Component ‘AppComponent’ must have a template or templateUrl. This is true as any Angular Component *must* have an associated template. We learned earlier that this could be in the form of an inline template, or as a separate file. You can use either one you like, but one must be present.

Passing In Component Meta Data

This is how you can define that template. It is part of the component meta data. First off however you specify a selector for the name of the component when used as a directive in a template file. Since we are making a games related application, we’ll use the prefix of game. In addition, since this is the root component, we’ll assign a suffix of root. That looks like this.

Note: If you see an error such as The selector of the component “AppComponent” should have prefix “app”, this just means you need to update your prefix settings in angular.json and tslint.json.


Set Inline Template

For this root component, we’ll just make use of an inline template using ES6 Back Ticks.

Bootstrap The Root Component

The sections above have defined a root component for a fictional games application in Angular. There is one more step to complete before using the component and that is to bootstrap the component. Angular has an index.html file and it is the main page for the application. In fact it is usually the only web page of the entire application. It looks to the user that there are many pages, but what is happening is html is dynamically inserted and removed from this one single index.html page. This is why these types of applications are called single page applications. Here we can see the relationship between the selector in a component and how it is referenced in html.
angular selector and directive

In the html markup when we use that custom html, in our case <game-root></game-root>, it is known as a directive. We also have structural directives in angular. Now how does Angular know what to do with a custom html element like that? It looks in Angular module for the answer. Angular modules are used to organize an application into blocks of functionality. Do not confuse them with ES6 modules, that are completely different. It is the Angular Module that Bootstraps the component. You might also hear this referred to as Registering a component. For this component, the bootstrapping occurs in app.module.ts.

An Angular module is identified using a class with the export keyword. This class is made to be a module by using the @NgModule Decorator. Just like a component uses the @Component Decorator, so to does a module make use of a @NgModule decorator. The properties of the @NgModule decorator are arrays. The declarations array defines which components belong to this module. The imports array defines the external modules that need to be available to any components in this angular module. These could be angular modules, 3rd party modules, or custom defined modules. Finally, the bootstrap array defines the starting component of the application and of course that is our AppComponent.

We can now test this out by running ng serve from our applications root directory.
Angular root component demo
It’s not incredible, but it’s a start! We can inspect Chrome Developer Tools to learn more about how this works.
angular in chrome developer tools
What we can see is that our custom tag now has the associated template html inserted between the opening and closing tags. Cool!

Summary

Angular is made up of components. Those components are defined by a class in Typescript that is enhanced with a @Component Decorator. Each component can import whatever is needed to do its work. In this tutorial we had a look at the root component and saw how to bootstrap it using the app.module.ts module.

|