A2 - Angular Series : Component

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

Original article on Medium

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.

Short cut cmd to generate component

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.

Example: 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 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: [ ]} )

---

Angular Documentation : https://angular.io/api/core/Component

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 ?