Basic Angular2 Component Code

app.component.ts

The previous article explained the basic file structure of Angular. From that, we saw that a component file is prepared in the app folder inside the src folder, and that the sample includes a component file named app.component.

If you understand what is inside app.component, you can understand how components are created. Let us look at app.component.ts.

app.component.ts is a TypeScript script file. The default contents are as follows.

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

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

This is the source code of an Angular component. If we organize it a little, it looks like this.

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

@Component(...configuration information...)
export class ComponentName {
    ...required information...
}

The initial import loads a module. Angular provides many features, and all of them are modularized. Modules are loaded with import, written as follows.

import objectToLoad from moduleSpecifier;

You can write multiple objects to load inside {} separated by commas.

Here, it loads Component from the @angular/core module. This is the @Component annotation object that appears next.

An annotation is used to add various kinds of information to code. @Component includes several features that allow the class defined below it to be used as a component. In simple terms, if you specify the @Component annotation before a class definition, that class is recognized as a component.

@Component Settings and the Exported Class

Now let us look at the @Component annotation. The parentheses following the annotation receive an object as an argument. This object contains the various settings passed to the component. The specified items are as follows.

• moduleId: Specifies the module name. Here, the value of module.id is specified. The module ID is set directly as moduleId.
• selector: The name used to identify the component. Here it is set to app-root, so this component is identified by the name app-root. This means the component can be used with the <app-root> tag.
• templateUrl: Specifies the URL of the template file used to display the component. Here, app.component.html is specified.
• styleUrls: Specifies stylesheet URLs. This is an array, and the CSS files to use are collected here. In this example, only app.component.css is used.

The most important of these are selector and templateUrl. selector specifies the custom tag name used when placing the component in HTML, and templateUrl specifies the template file to use. Without understanding these two, you cannot know which file to modify or how.

Exporting a Class with export

The class created with the @Component annotation is named AppComponent. It is written in the form export class ClassName. export makes an object available outside the file. An exported class can be loaded and used elsewhere with import.

Here, when exporting the AppComponent class, a value is assigned to the variable title. The value assigned here can later be used in the template.

Now you have seen how the basic source code of the AppComponent component is structured.

HTML and Stylesheets

After explaining the script, let us look at HTML and CSS.

app.component.html The contents of app.component.html look like this.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
.... omitted ...

An <h1> tag is output, and its content includes {{ title }}. The {{}} syntax is used to write a JavaScript expression and output its result.

Here, it outputs the value of title, which is the variable created in the export class from the script explained earlier. Variables created in the script can be used in the template in this way.

The remaining omitted part contains a logo image and several links related to Angular. There is nothing special there, so we will skip it.

app.component.css Next, if you open the stylesheet app.component.css, it is empty. You can write styles there as needed.

Customizing the Display

Now that we understand the basic structure of a component, let us make a small application and slightly modify the component display.

The examples for app.component.html and app.component.css are as follows.

app.component.html

<div class="rect">
    <h1>AppComponent</h1>
    <p>{{'This is a component named "' + title + '".'}}</p>
</div>

app.component.css

.rect {
    border: 1px solid lightgray;
    padding: 10px 5px;
    margin: 10px 5px;
    color: darkgray;
}

Modify the files like this and display the application again. This time, a title and message appear inside a rectangular border.

Here, the rect class is defined in app.component.css, and it is used in app.component.html with <div class="rect">. In this way, you can easily customize the display of a component just by rewriting the HTML and stylesheet.

Some people may wonder why the HTML template has no tag for loading app.component.css. This is because the @Component annotation in the app.component.ts script included this setting.

styleUrls: ['app.component.css']

This loads the stylesheet, so there is no need to write a separate tag to load it.