A2 -Angular Series : Component

Sourabhh Sethii
DXSYS
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.

https://gist.github.com/Sourabhhsethii/8aea69534db0634d50040d52b058d044

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.

@Component(

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

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

styles: [ ]}

)

Start the Server with below cmd

npm start

Hit below Url

http://localhost:4200/

Output Screen

Repo is avaliable at below location

https://github.com/Sourabhhsethii/Let-Us-Start-With-Angular/tree/master/Angular-Series-A2-Component

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
DXSYS
Editor for

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