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.
Project StructureShort cut cmdng 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
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: `
sample-form-component works!
`,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 locationhttps://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?
A2 -Angular Series : Component was originally published in DXSYS on Medium, where people are continuing the conversation by highlighting and responding to this story.
