How to make new component using CLI

Posted by

How to make new component using CLI

https://youtu.be/6QvWz0XtzjA



Hello, and welcome to our new lesson. In this lesson, I am going to talk about How to make a new component using Command Line Interface (CLI). Using CLI for making a new component is very easy as ABC.

To make a new component, go and open Terminal from your editor. See the below image for more understanding:

make new component using CLI
Terminal

Click on Terminal and it will open in a while. Let’s see the image below:

How to make new component using CLI
open terminal

Here, you can see the directory, C:\Users\ShahzaibKamal\Desktop\first-angular-app>

Now type the following command to make a new component in app folder:

ng generate component header

You can also type a shortcut like;

ng g c header

where ng stands for angular, g for generate, c for the component, and header is a folder name. After typing the above command, the new component will be generated automatically. Let’s see the image below;

How to make new component using CLI
IntelliJ


Now, as you can see the new component has been generated automatically. You can now notice the following files in the new directory:

  • header.component.css
  • header.component.html
  • header.coponent.spec.ts
  • header.component.ts

Angular is an open source JavaScript based Framework, written in TypeScript. Angular make it easy to create single and Reactive application very fast with less code

header.component.ts

As you can see, the below file has been automatically generated.

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

@Component ({
  selector: ‘app-header’,
  templateUrl: ‘./header.component.html’,
  StyleUrls: [‘./header.component.css’]
})

export class HeaderComponent implements OnInit{

  constructor () {}
  ngOnInit() {
  }
}

header.component.html

You can see the below Built-in HTML Component. You can change it according to your requirements.

<p>
  Header works!
</p>

app.module.ts

If you see the app.module.ts file, you can see that, header component and has been automatically imported. Let’s see the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { ContentComponent } from ‘./content/content.component’;

import { HeaderComponent } from ‘./header/header.component’;

@NgModule({
  declarations: [
  AppComponent,
  ContentComponent,
  HeaderComponent
],

imports: [BrowserModule],
providers[],
bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

Now, you can call it in app.component.html. let’s see it below;

<div>
<h1>
  Welcome to {{title}}!
</h1>
<h1> {{string}} </h1>

<!—The new header component is here -->
<app-header> </app-header>
<app-content> </app-content>




Conclusion

How to make a component using CLI, is very easy. It will automatically generate all your files, and directories. All you need to have is a basic understanding of Angular. It’s as easy as ABC, just open your Terminal and type the command ng generate component new-component-name, and it will generate it automatically.

That’s all we have in this lesson for now. If you want to make Component Manually just click on this link: Create a Component in Angular 4

In Next lesson we will be talking about How to Nest component. So stay tuned and goodbye for now!



Suggested Source

ng-book: The Complete Guide to Angular 4

You can buy this book, to master Angular 4 framework in less time without beating your head against a wall. The book also contains code examples with each chapter. This will clear all your confusion and will clear your concept on Angular 4.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *