Welcome to the Series

Welcome to the Angular App Development series, where we will learn the ingredients of Angular and the step by step processing of creating an Angular App - through the motto learning by doing.

Till now....

As we have seen in the previous post - Angular Component Overview, the component is the main entity that plays a vital role in the application as it has got the complete package / module with the business logic and the view / presentation.

In this post...

We can very well create the files (.ts, .html and .css) manually but creating over the command line with the help of Angular has some benefits. In this post, we can see how can we create a component in the command line.

Command Syntax and Explanation

The command to create a component is

ng generate component <componentName>

The same can be used with the shortcut of the keywords as well - by using the first letter of the each keyword, as follows.

ng g c <componentName>

The name of the component can be a any valid name of your choice.

Example

For example, let us create a component named 'welcome'.

λ ng g c welcome

The above command creates the component with the following set of files, as follows.

λ ng g c welcome
CREATE src/app/welcome/welcome.component.html (22 bytes)
CREATE src/app/welcome/welcome.component.spec.ts (635 bytes)
CREATE src/app/welcome/welcome.component.ts (273 bytes)
CREATE src/app/welcome/welcome.component.css (0 bytes)
UPDATE src/app/app.module.ts (479 bytes)

The set of files have a specific convention on their names. All of them will have a prefix of the component name so as to be organized better and for an easy identification. The file names have the pattern <componentName>.component.<extension>.

Files Created

As we know, a component is a set of bundled files - a main .ts file, a .html file and a .css file to make the presentation. We also see a new file called .spec.ts created by default by Angular to work with the Unit Testing. Isn't it great?

File Updated

In addition, Angular also does a great value add. It updates the app.module.ts file with the new component being created afresh, so that we do NOT need to do it manually. Another bonus!

Let us have a sneak peak at the welcome.component.ts file.

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

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

  constructor() { }

  ngOnInit() {
  }

}

Make a note that the Angular works by convention, and hence it adds the word 'Component' in the name of the component. For example, we gave welcome as the name of the component and the actual class name is 'WelcomeComponent' in the welcome.component.ts file.

export class WelcomeComponent implements OnInit {

The @component decorator is exactly the same as what we saw in the Angular Component Overview post.

OnInit Interface and ngOnInit() method

As it is a manually generated component, Angular thinks that we need to have a full fledged class implementation and hence it imports the OnInit interface and adds an implements OnInit clause to the class declaration and also provides an empty method ngOnInit() inside the class.

Constructor

Alongside Angular adds an empty constructor() method (similar to the Java constructor but the method name is different in Angular unlike Java where we declare the constructor with the same name of the class).