Getting Started ✍️ With Angular 6 Using Angular CLI - Part 2️⃣

Introduction

In this article, we are going to learn the basic development commands in Angular CLI ( Command Line Interface ). So, before reading this article, you must read our previous article Angular – Part One for more knowledge.

Angular CLI version

We know Angular 7 was released recently but still, we are using Angular 6. Yes, we started this application before the release of Angular 7. We can expect several updates from the Angular Team in the upcoming years. Using any of the following commands, we can identify the current Angular CLI version in the application.

ng --version
ng -v

The following output tells us the current Angular CLI version in the application.

Run the following command to identify the global version of Angular CLI.

npm list -global --depth 0  

We can see that we are using a lower version of Angular CLI compared to the global version. Before migrating to the higher version of Angular CLI, we need to understand the necessary updates.

Component

Components are the basic UI building blocks of an Angular application. We already created an Angular basic application in our previous article and by default, it contains an app component and its respective files. So now, we are going to create a component inside the application using any of the following commands. "Customer" is our component name.

ng generate component customer
ng g c customer

A component is created successfully inside the "app" folder.

Now, how will you know the places you need to register the current-generated component? This is why we integrate a version control like "Git" in the application, otherwise, people blindly create the application without knowing anything. This way, we will know the exact places we need to register the component in the application, like in the following way.

Dry run

If you are new to Angular CLI and planning to create a component, module, class, etc. in the application, then, the first time you will have some confusion as to what name to give and where this file will be created. For that, we can use the “dry run” command in Angular CLI. This command will stop the CLI from making any changes to the application or display only the files that we are going to create in the file system. We can use any of the following commands to verify the "dry run" command.

ng generate component customer --dryRun
ng g c s -d

In the following screenshot, it will mention the dry run "Note".

Module

A module is a mechanism to group the interrelated components, pipes, services, and directives in such a way that we can create an application. To define a module, we have to use the decorator "NgModule" in the TypeScript file in the following way.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';
@NgModule({
  declarations: [
    AppComponent,
    CustomerComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can use any of the following commands to create a new module in the application.

ng generate module customer  
ng g m customer  

Class

Using any of the following commands, we can create a class in the application.

ng generate class customer
ng g cl customer

In the above command, we can see "cl" as the alias of the class. They are not using "c" for class because it is considered as a "component". Now, the class will be created under the "app" folder but we included this in the customer folder or any other folder. Then, add the folder name at the front of the class name with a forward slash, such as "customer/". Because we are planning to add the class to the customer folder, we added this slash after the folder name.

ng generate class customer/customer

Interface

We are going to create a major contract in the application, called an interface. We can run any of the following commands to create an interface in the application.

ng generate interface customer
ng g i customer

Enum

We can run any of the following commands to create an Enum in the application.

ng generate enum customer
ng g e customer

Inline template and style

As we know when running the Angular component command, it automatically generates all the respective files for the component, so how can we add a separate in-line template or in-line style? Well, run the following command to achieve both the inline template and style in the component.

Inline template command

The following command will create an in-line template instead of creating a separate html file in the system.

ng generate component employee --inline-template  
ng g c employee -t  

We can see that the TypeScript file created an inline template instead of giving a reference to the HTML file.

Inline style command

The following command will create an inline style option instead of creating a separate CSS file in the system.

ng generate component student --inline-style
ng g c student -s

In the following TypeScript file, we can see it is put as blank in the style reference area instead of referring to the style CSS.

Download

• Source Code

Reference

• Angular Docs
• TechBlog Content

Summary

From this article, we have learned the basic commands of Angular CLI. I hope this article is useful for all the Angular CLI beginners.