A2 -Angular Series : Component

Sourabhh Sethii
Published in
3 min readMay 15, 2020


We will be looking into below concepts in this article :

1.) Create component

2.) Short cut command to create component

3.) Component Decorator

4.) Angular Documentation

5.) Example Code @ Github

Prerequisite : NPM and Node Should be Installed.

For creating Angular Project : Check previous Article on Let’s Start With Angular Series .

Create component

Run below cmd

ng genrate component sample-form-component — inline-template — inline-style

Angular CLI will create the component and add it in your angular project.

Project Structure

Short cut cmd

ng g c sample-form-component -it -is

g = genrate

c= component

sample-form-component = project name

inline-template = -it

inline-style = is

inline-template and inline-style states that we don’t need to create the separate html and css file a component.


I have used this sample-form-component in app component as shown below in image. You can used this component where ever you wanted to you in your angular application, just by providing the selector name in the html file as this component is declared in angular module file hence it will accessible to all the components associated with the angular module.

sample-form-component used in app component

Component Decorator

Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

The outside function is called as decorator factory and the inside one is called as the decorator. The decorator factory takes some configuration values and returns a decorator at shown in below example.

Decorator allow us to tell Angular that a particular class is a component, or module. And the decorator allows us to define this intent without having to actually put any code inside the class.


{ selector: ‘app-sample-form-component’,

template: ` <p> sample-form-component works! </p> `,

styles: [ ]}


Start the Server with below cmd

npm start

Hit below Url


Output Screen

Repo is avaliable at below location


Interview Questions :

Question 1: What is component decorators in Angular?

Question 2: How to create angular component?

Question 3: What is decorator pattern?



Sourabhh Sethii
Editor for

I am an author of Building Digital Experience Platform and I am passionate about emerging technologies. https://sourabhhsethii.com/