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 recently Angular 7 is released but still we are using Angular 6 ! Yes, we have started the application before the release of Angular 7, may be upcoming years we can expect more number of updates from Angular Team. Using any of the following command we can identify the current Angular CLI version in the application.
ng --version ng -v
The following output we can see 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 realise that we are using the lower version of Angular CLI comparing 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 block of an Angular application. We already created an angular basic application in our previous article and by default it contains an app component and it’s respective files. So now we are going to create a component inside the application using any of the the following command. “customer” is our component name.
ng generate component customer ng g c customer
Component is created successfully !! The customer component created inside the “app” folder.
Then how will you know which are the places we 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. Then we will know exactly which are the places we need to register the component in the application like the following way.
Dry Run
If you are new to the Angular CLI and planning to create a component,module,class,etc in the application. Then the first time you will have some confusion for what name will give where this file will be created. For that we can use “dry run” command in Angular CLI, this command will stop the CLI from making any changes to the application or only display which are the files are going to create in the file system. We can use any of the following command to verify the dry run command.
ng generate component customer --dryRun ng g c s -d
In the following screen shot at the end of the result it will mention the dry run “Note”.
Module
Module is a mechanism to group the components, pipes, services and directives that are related, in such a way that we can create an application. To define a module then we have to use the decorator “NgModule” in the typescript file for 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 command to create a new module in the application.
ng generate module customer ng g m customer
Class
Using any of the following command,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 class, but why they are not using “c”for class, because it is considered as “component”. Now the class will create under the “app” folder and but we include this as in the customer folder or any other folder. Then add the folder name at the front of the class name with slash “customer/”. Because we are planning to add the class inside the customer folder that is why we add slash after the folder.
ng generate class customer/customer
Interface
We are going to create a major contract in the application called as interface. We can run any of the following command to create an interface in the application.
ng generate interface customer ng g i customer
Enum
We can run any of the following command to create an Enum in the application.
ng generate enum customer ng g e customer
Inline Template and Style
As we know when we running the Angular component command it automatically generating all the respective files for the component. So how we can add separate Inline template or Inline Style or Css ? So run the following command to achieve both inline and style in the component.
Inline Template Command :
The following command will create a inline 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 reference of the html file.
Inline Style Command :
The following command will create a 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 put as blank in the style reference area instead of referring the style css.
Download :
Reference
Summary
From this article we have learned the basic command of Angular CLI. I hope this article is useful for all the Angular CLI beginners.
