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
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
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.
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
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?
