Angular 6 Tutorial: Angular Components Explained

Beginner's Tutorial Series for Angular 6

Throughout this beginner's series, you'll learn how you can use Angular 6 to build client side web applications for mobile and desktop.

Understanding Angular 6 Components

Most work you do with Angular relates to components. Basically an Angular 6 application is a tree of components with a root component. A component controls a part of the web application screen. It consists of JavaScript (or precisely TypeScript) code, HTML code and CSS. If you are familiar with the MVC (Model-View-Controller) architecture or design pattern, each component actually uses the same architecture: the component's code represents the controller and the HTML code (with CSS) represents the view.

How to Create an Angular 6 Component?

You can create a component in Angular 6 using the @Component() decorator which can be imported from @angular/core. You simply decorate a TypeScript class with the @Component() decorator that takes information about the HTML view to use for the component and the CSS styles. For the code which controls the component, it's encapsulated inside the class.

Here is an example of a simple Angular component

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

@Component({
  selector: "my-component",
  template: "Hello Angular"
})
class MyComponent {
}

This component can be called in your HTML code just like any standard HTML tag, i.e:

<my-component></my-component>

The result will be: Hello Angular.

In a previous tutorial we have used the Angular CLI to generate a basic Angular 6 application with the following folder structure

In src/app you can find various files for the root component of the application.

  • app.component.css: contains all the CSS styles for the component
  • app.component.html: contains all the HTML code used by the component to display itself
  • app.component.ts: contains all the code used by the component to control its behavior

You can also find the app.module.ts file, which's used to define an Angular module.

A root component is the first Angular component that gets bootstrapped when the application runs. Two things are special about this component:

First, if you open the application module file src/app/app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

You'll notice that, it's added to the bootstrap array of the module definition.

Second, if you open the src/index.html file (the first file that gets rendered when you visit the application URL) of the application

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Angular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root></app-root>
</body>
</html>

You'll notice that, it's called inside the document <body> tag.

Starting with the application root component, all the other child components (the tree) will be loaded.

Now, let's open the component file src/app/app.component.ts:

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

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

First we import the Component class from @angular/core. Then we use it to decorate the AppComponent class which transforms it to a component. The component decorator takes these information:

  • The selector contains the name of the tag that can be used to create this component.
  • The templateUrl contains the relative URL/path to the HTML template to be used as the view
  • the styleUrls contains the array of CSS styles to be used for styling the component

The AppComponent has a variable title which has a string value. If you look in the component HTML template src/app/app.component.html:

<div style="text-align:center">
    <h1>
        Welcome to !
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">
</div>

You can notice that we are using the curly braces `` to display the value of title. This is what's called data binding (we'll look at the concept in depth in next tutorials).

Creating Angular 6 Components Using the Angular CLI

You can create a component by manually creating the necessary files or you can also use the Angular CLI to automatically generate the bare minimum code for a a basic component. The Angular CLI takes care, also, of adding the component to the module definition.

To generate a component with the Angular CLI just run the following command:

ng g component MyComponent

You can find the available options from the docs.

Conclusion

In this tutorial of Angular 6 series, we explained Angular components and how to create them.

Ahmed Bouchefra Software enginner and full-stack Python/JS developer

comments powered by Disqus