Working with Component

Let’s see how data flows in a component. As we created a component named dashboard in last chapter, following files were generated.

• dashboard.component.css
• dashboard.component.html
• dashboard.component.spec.ts
• dashboard.component.ts

Open the dashboard.component.ts file. Here is the content of this file:

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

At the top of the file, different dependencies are imported. The import statement is used to import modules and services which will be used in component. In this case Component and OnInit are imported from @angular/core.

After the import statements, A component decorator is used, @Component. Component decorator is required in order to create a component. This component decorator defines the metadata of the component. It defines the components HTML template and CSS styles and also if component uses any third-party dependency.

The first key is ‘selector’, which defines the tag name for this component. It tells angular how it will recognize the component when it is used in HTML markup. Like here selector key value is app-dashboard. So to use this component, we can simple use following syntax in HTML and our component will be rendered.

<app-dashboard></app-dashboard>

Next Keys are template and styles. Template key defines the HTML of the component. We can use inline HTML here, but it’s good to use a separate file to keep HTML. This is the view of the component. So here these keys are pointing to dashboard.component.html and dashboard.component.css files respectively.

After that is a class declaration. This is the controller of the component. The class name is DashboardComponent and it implements OnInit. You can see that this class has a constructor method and one OnInit method. OnInit method is used to perform logic which need to be used at the time when component is initialized. All our logic goes inside this controller class.

Data is defined in the controller class. Here we fetch data from different data sources like web API and with the help of data binding this data is displayed on the view. In this chapter we are going to fetch data from API. We will do it in further chapters when we’ll work with HTTP module. Right now, we are going to define a simple variable and assign some value to it. So in dashboard.component.ts file, let’s make following changes.

export class DashboardComponent implements OnInit {
  message: string;

  constructor() { }

  ngOnInit() {
    this.message = "Learning Angular is exciting!";
  }

}

Here we have created a variable named ‘message’ which is of string data type. This is TypeScript way of defining a variable. After that we have assigned a value to this variable during the initialization of component. So we have written it inside the ngOnInit method.

To display this message on view, we can use string interpolation binding. This uses curly braces. So we can add following HTML in dashboard.component.html file.

<h1>{{message}}</h1>

Now to view this component in our application we need to add this in root component, that is app component. So open app.component.html file and replace it contents like this:

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

Notice we have used app-dashboard tag for our dashboard component. Now if you run the app then you can see the message “Learning Angular is exciting!”.

This was the basics of working with component. In next section, we'll learn about modules.