We are about to take the first trembling steps into building our first component. The Angular CLI has already scaffolded our project and thereby carried out a lot of heavy lifting. All we need to do is to create new file and starting filling it with content. The million dollar question is what to type?
So let's venture into building our first component. There are three steps you need to take in creating a component. Those are:
- Import the component decorator construct.
- Decorate a class with a component decorator.
- Add a component to its module ( this might be in two different places).
First off, let's import the component decorator:
import { Component } from '@angular/core';Then create the class for your component:
class AppComponent {
title:string = 'hello app';
}Then decorate your class using the Component decorator:
@Component({
selector: 'app',
template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
title: string = 'hello app';
}We give the Component decorator, which is function, an object literal as an input parameter. The object literal consists at this point of the selector and template keys, so let's explain what those are.
A selector is what it should be referred to if used in a template somewhere else. As we call it app, we would refer to it as:
<app></app>
The template or templateUrl is your view. Here you can write HTML markup. Using the template keyword, in our object literal, means we get to define the HTML markup in the same file as the component class. Were we to use templateUrl, we would then place our HTML markup in a separate file.
The preceding example also lists the following double curly braces, in the markup:
<h1>{{ title }}</h1>This will be treated as an interpolation and the expression will be replaced with the value of AppComponent's title field. The component, when rendered, will therefore look like this:
hello app
Now we need to introduce a completely new concept, an Angular module. All types of constructs that you create in Angular should be registered with a module. An Angular module serves as a facade to the outside world and it is nothing more than a class that is decorated by the decorate @NgModule. Just like the @Component decorator, the @NgModule decorator takes an object literal as an input parameter. To register our component with our Angular module, we need to give the object literal the property declarations. The declarations property is of a type array and by adding our component to that array we are registering it with the Angular module.
The following code shows the creation of an Angular module and the component being registered with it by being added to declarations keyword array:
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent]
})
export class AppModule {}At this point, our Angular module knows about the component. We need to add one more property to our module, bootstrap. The bootstrap keyword states that whatever is placed in here serves as the entry component for the entire application. Because we only have one component, so far, it makes sense to register our component with this bootstrap keyword:
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}It's definitely possible to have more than one entry component, but the usual scenario is that there is only one.
For any future components, however, we will only need to add them to the declarations property, to ensure the module knows about them.
So far we have created a component and an Angular module and registered the component with said the module. We don't really have a working application yet, as there is one more step we need to take. We need to set up the bootstrapping.
The main.ts file is your bootstrap file and it should have the following content:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);What we do in the preceding code snippet is to provide the recently created module as an input parameter to the method call bootstrapModule(). This will effectively make the said module, the entry module of the application. This is all we need to create a working application. Let's summarize the steps we took to accomplish that:
- Create a component.
- Create a module and register our created component in its declaration property.
- Also register our component in the modules bootstrap property to make it serve as an application entry point. Future components we create just need to be added to the
declarationsproperty. - Bootstrap our created module by using the said module as an input parameter to the
bootstrapModule()method.
You as a reader have had to swallow a lot of information at this point and take our word for it. Don't worry, you will get a chance to get more acquainted with components in this chapter as well as Angular modules in upcoming chapters. For now, the focus was just to get you up and running by giving you a powerful tool in the form of the Angular CLI and show you how few steps are actually needed to have an app rendered to the screen.