Angular Core Components

There are four (4) Angular core components:

a.) Directives

angular core components

  • 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, Directives look like this:

angular core components

  • 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:

  • 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 app. It provides a reusable data class and UI which you can manipulate as you wish.

angular core components

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

Let’s look at components in code.

  • 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

Among the four Angular core components, the service component provides Data that every application needs.

angular core components

  • 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.

angular core components

And those are the four Angular core components. On the next article, we will discuss Templates.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.