We have created our first angular application we will now look at anatomy of a Component. Angular components are simply typescript classes. Angular knows how to treat a class by using class metadata which tells angular how to use a class. When we generated our angular project from scratch angular-cli has also created a default component called
AppComponent under src/app/app.component.ts
If we look at the anatomy of this component we can see that we have first import statement, a metadata and class definition.
In the first line we are importing Component decorator from angular core module.
We then define metadata by using component decorator with a leading @ symbol following the name of the decorator. Component decorator is a function excepts an object as a parameter therefore we need to call component with paranthesis.
After the decorator we define the component class which contains our variables and logic. Component needs to be exported so it can be used in other places in code.