How to create a component in Angular?

This tutorial is about the building blocks used in the creation of an Angular application.
As a web developer, you are aware of the web frameworks that are in the present for example angular,vue.js and next.js.
However, today we are going to see the most important part of the angular framework which is the Component.

Components in Angular

Components are the basic building blocks of an angular application, the components deal with the data and the user interaction logic.
A component comprises 3 blocks.
1) Templates,
2) Class,
3) Metadata.
In angular applications, components are defined by the command decorator.
The view of your website is the result of your components.
A website may contain many components, each component handles a small part of the User Interface.

Note: components are very useful when a particular section is to be redirected/refreshed.

Till now you learned what is components in angular, now let’s see how to create a component in angular.
To create a new component, in angular CLI, type

The syntax for creating a component in angular is.
Syntax: “ng g c component-name”

For example : 
ng g c newapp


This command will generate a folder named newapp, newapp component has many files that are as follows:

  1. newapp.component.html (21 bytes)
  2. newapp.component.spec.ts (626 bytes)
  3. newapp.component.css (0 bytes)
  4. app.module.ts (1548 bytes)

Running an Angular component, In the CLI, use

  1. npm serve
  2. npm serve -open
  3. npm serve -o

    The web application runs our machine on the browser at “http://localhost:4200


Creating a component in Angular is easy as it uses only one command.
Serving the component can be done according to our, the word o/open means, after the creation of a component, the web application opens directly in the browser without the human intervention.
Also learn: Redirect to another page on click in AngularJS

Leave a Reply

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