Hello Component : Introduction to Angular2 Component.

My assumption is that the readers of this post already know how to create and serve an Angular 2 project and have successfully created an Angular 2 app by running Angular 2 ‘ng new’ command like so,

ng new your-new-project

if you haven’t, ‘holup’, don’t kick yourself, read this post by Ire Aderinokun then come back to this page to add knowledge to your knowledge.

Basically, angular 2 components are the smallest MVC unit of an angular 2 app i.e. a component is an entity that has its own View(HTML), model(i.e. Data) and Controller(Logic that controls the view). It is also represented by a custom HTML element that tells angular to render the component’s view wherever it find the component’s custom element.

Your typical Angular 2 component look like this:

The first line of code is self explanatory, it import the component decorator from the ‘core’ folder that resides inside the @angular folder.

so, what is component decorator?

Basically, component decorator is like adjectives in English language, they tell angular framework more about the file in which they reside.

They tell angular that :

1. The file has an angular component inside.
2. The name of the custom element that will render the component view in our application view will be called ‘app-root’.

3. The markup language(HTML)/View of the component is located inside the app.component.html file.

4. The CSS to style our HTML/view is located inside the app.component.css file.

If you pay attention to details, you’ll observe that there’s a ‘s’ after the ‘url’ in the styleUrls property. The square brackets that stands out, also shows that the property can accept an array of values. The implication of this is that your component HTML/view can be styled by multiple style sheet.

I hope this helps. Thanks.