There are four (4) Angular 2 Core Components:

a.) Directives

1aa

– Directives are classes that adds behavior on a specific element on a document object model(DOM)
– It can add and remove certain elements and change the styles of your DOM

In code, Directive looks like this:

2aa

– ngStyle changes the appearance of the element
– ngIf removes or adds a specific element to your DOM

Now here’s an example of Directive in TypeScript:

3aa

– You must first import the Directive from angular core
– Then add the directive decorator ‘@Directive({})’

b.) Components

One of the three types of a Directive. Unlike the other types, components are used as the building blocks of an Angular 2 app. It provides a reusable data class and UI which you can manipulate as you wish.

4aa

– Components are a combination of a controller and view
– The most valuable type of a Directive

Let’s look at components in code.

5aa

– Same with Directive, we have to import the component from angular core.
– @Component decorator acts as the view.
– The class itself acts as our controller for this specific component.

c.) Services

Service Core Components provide Data that every application needs.

6aa

– Services implements the concept of dependency injection.
– Service can fetch Data on a different Source other than the two shown above.

d.) Routes
Routing enables navigation from one view to another based on a given URL. Think like hyperlinks but this time it’s called RouterLinks.

7aa

On the next article, we will be discussing “Understanding Templates”.

JOIN THE ANGULAR ACADEMY!
$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.