Creating New Component in Angular

Components are the building block of any Angular application. A well designed UI should break its rendering into different components where each component renders the particular portion of the UI. That makes it more manageable and also the same components can be reused. In this article we’ll see how you can create a component in Angular.

Creating component in Angular

You can create a component using one of the following ways-

Using Angular CLI
Creating component manually

Creating component using Angular CLI

Navigate to the root folder of your Angular application and run the following command to create a new component.

ng generate component COMPONENT_NAME

OR

ng g c COMPONENT_NAME

If I want to create a component named hello-world then it can be done as given below-

F:\NETJS\Angular WS\hello-world-app>ng generate component hello-world

CREATE src/app/hello-world/hello-world.component.html (26 bytes)
CREATE src/app/hello-world/hello-world.component.spec.ts (657 bytes)
CREATE src/app/hello-world/hello-world.component.ts (294 bytes)
CREATE src/app/hello-world/hello-world.component.css (0 bytes)
UPDATE src/app/app.module.ts (576 bytes)

As you can see creation of component results in creation of 4 new files and also in automatic updation of app.module.ts. Created files have specific roles as given here-

hello-world.component.ts- This is the class where code for the component is written in TypeScript.
hello-world.component.html- The component template, written in HTML.
hello-world.component.css- The component's private CSS styles.
hello-world.component.spec.ts- Defines a unit test for the hello-world component.

The update in the app.module.ts is-

Inclusion of import statement to import the type script file of the newly created component.
Inclusion of newly created component in the declarations array with in the @NgModule decorator.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

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

Changing HTML template

Let’s change the template src/app/hello-world/hello-world.component.html and add some code.

<!--Using Bootstrap for styling-->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Success Message</h1>
      <p class="text-succcess"><strong>Success!</strong> Able to create a component.</p>
    </div>
  </div>
</div>

Note that in the html, bootstrap is used. Refer How to Add Bootstrap to Angular Application to see how to add Bootstrap to angular.

Also add the <app-hello-world> tag in the app.component.html to render the view.

<app-hello-world></app-hello-world>

Now if you build the application using ng serve command and access the URL http://localhost:4200/ you should see the rendered template.

Creating component manually

You can also create a component manually. Once you have the Angular project structure created using ng new command you can open it in the IDE you are using. I am using Visual Code here but the steps remain same.

Go the src-app folder with in your opened application right click – New Folder and create a new Folder for your component. I have named it “hello-world”.

Right click the newly created component folder and select new file and create the following two files for Type Script and Template.

hello-world.component.ts
hello-world.component.html

Open hello-world.component.ts and copy the following code.

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html'
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(){
  }
}

Open hello-world.component.html and copy the following code.

<!--Using Bootstrap for styling-->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Success Message</h1>
      <p class="text-succcess"><strong>Success!</strong> Able to create a component.</p>
    </div>
  </div>
</div>

In the app.module.ts add the import statement for the new component as well as add it in declarations array too with in @NgModule decorator.

import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],

Also add the <app-hello-world> tag in the app.component.html to render the view. Note that this tag should match the Selector attribute value of @Component decorator used in Component class.

<app-hello-world></app-hello-world>

With this, manually creating component in Angular is done, you can build the application using ng serve command and access the URL http://localhost:4200/

That's all for this topic Creating New Component in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Tuesday, December 13, 2022