googleads
Components vs Directives in Angular(with examples) | Angular Developers
preloder
Angular Tips & Tricks Web Development

Components vs Directives in Angular with Examples

Before we start with the differences between Components and Directives in Angular, let’s understand what is Components and Directives in Angular. Ever since the release of angular, Components and Directives play a major role and acts as one of the key features.  Let us now discuss how Components and Directives should be implemented. I suppose that you would know that these features are applicable only from Angular 2. And here is everything you need to know about Components Vs Directives in Angular with examples.

Components in Angular 

Simply, Components is a UI control of the Applications. We know AngularJS is not Component-based. To optimize the design process,  Components were introduced in Angular 2.

There are some major advantages when we go with Component-based like code reusability,  enhance development speed and easy integration.

Basically, Component is a class. Decorator (@Component)  makes its a component and provides configuration metadata. Component is a tree structure for the application. It interacts with HTML file and performs the data-bind. Components are a subset of directives.

The Syntax to create Component is given below.

 Structure of Component

While creating component, Angular generates html, scss(css), spec.ts and ts(Typescript) files.

Following are the basics of the generated typescript files.

Note that any component that we create must be declared in App module or its respective modules. For instance, follow the code below.

Data Binding

Generally, without a framework, data related actions are done by HTML controls. Angular provides us two-way data binding mechanism to communicate with components and HTML templates.

Image source: Angular website

The above diagram explains you how the data controls. Each form has a direction: to the DOM, from the DOM, or both 

Here,

In this, we injecting value through ‘myPropertyValue’ and handling the emitted value from ‘eventControl’. You can use @Input and @Output decorators to handle this data’s control.

Directives in Angular

Directives are simply the instructions in DOM. It specifies how to place your components and business logic in Angular. It is also a class. But, Decorator (@ Directive) makes it a Directive to stand out and perform its operations.

There are three types of Directives in Angular:

  1. Component Directive
  2. Structural Directive
  3. Attribute Directive

Component Directive

Component directive is used to specify the HTML templates. It has structure design and the working pattern of how the component should be processed, instantiated and used at runtime. It is the most commonly-used directive in any Angular project. 

Above, we discussed the component, that should be the Component Directive.

  • sample-page.component.css: contains all the CSS styles for the component.
  • sample-page.component.html: contains all the HTML code used by the component to display itself.
  • sample-page.component.ts: contains all the code used by the component to control its behaviour.

Structural Directive

Structural Directive changes the DOM layout design and structure. The main usage of Structural Directive is for manipulating and making run-time changes on the DOM elements. You can easily recognize it by an asterisk (*) symbol.

Let’s consider a code for instance.

 NgIf case study:

It is the simplest structure directive and easy to understand. Boolean expression can make entire DOM appear and disappear.

NgIf directive becomes property binding when you use it on <ng-template>.

NgFor case study:

 It is like a loop. You can use an Array to iterate values. In addition, ngfor also becomes property binding when you use it on <ng-template>.

Attribute Directive

An Attribute Directive changes the appearance or behaviour of a DOM element. However, it looks like a regular HTML attribute. In Attribute directive, we can easily implement it by simply specifying the selector. You can implement the directive behaviour on the controller class.

For instance, Let’s consider an example to change the text colour while hovering over the text, by using the attribute directive.

You can use the directive in HTML elements through selector name as follows.

Angular provides a few attribute directives. Some of that are:  

NgStyle: Depending on the component state, dynamic styles can be set by using NgStyle. Many inline styles can be set simultaneously by binding to NgStyle.

NgClass: It controls the appearance of elements by adding and removing CSS classes dynamically.

For instance, see the given code block.

Hence, that’s the difference between Components and Directive. Moreover, if you have any doubts in the above blog, do write it down in the comments.

Hire the best Angular developers in the industry in just a click. Find a skilful Angular developer for your business to get top-notch technology solutions for your company.

Turn your vision to magnificent reality with
Our Web and Mobile Solutions

Moreover, you can read many other interesting blogs related to Angular. Such as Create Your First Custom Angular CLI Schematic With Nx and 6 Essential VSCode Extensions for Angular Developers.

Like What You're Reading ?

The following two tabs change content below.

Rajkumar M G

Around 3 years of experience in IT, Rajkumar evolving as a knowledge packed developer by expertising the technologies like JavaScript, AngularJS, Apache Cordova, Ionic, Java Spring MVC. And also extends his love on Robotic science & embedded system and trying to master it all.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call