Component Have: 

Template – represents the view (using HTML)

Class – Code, Typescript, Business Logic, Data & Method (control the logic & view) 

MetaData: Information (Angular needs to decide for particular class angular component)

Decorator: Decorator Metadata feature in Typescript. Decorator just a function provide 

information about the class attached to it. Component use component decorator. 

• @Component Decorator is basically a function attach with class 
• Decorator tells an angular this is not a plain class this is component 

@Component Decorator 

• Contains both metadata 
• TemplateUrl – represents the view 
• styleUrl – point the css file
• Have selector for style
• Selector: custom html tag for selecting for this component 

This is component structure. 

Create new component using Angular CLI

• Ng g c componet_name (ng g c test)
• Then showing component in app.module.ts into declaration array containing TestComponent

Component selector way

• Using custom html tag (into parent html file → <app-test></app-test>)
• Using class name selector: “.app-test” (into parent html file → <div class=”app-test”></div>)
• Using attribute pattern selector: ‘[app-test]’ (into parent html file → <div app-test></div>)

Template: ‘<div>Inline Template</div>’

Note: using backticks (“) for multiple line