What is the difference between component and directive?

Question

I have just started working with Angular 2.

I was wondering what are the differences between components and directives in Angular 2?

Answer 1

Actually components are also directives, but have differences between them.

Attribute Directives :

Attribute directives are classes that are able to modify the behavior or appearance of a single element. For creating an attribute directive apply the @Directive to a class.

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Adding a directive attribute template.html File

   {{i + 1}}
   {{item.name}}

Structural Directives :

Structural directives change the layout of the HTML document by adding and removing elements, as a micro-templates. Structural directives allow content to be added conditionally based on the result of an expression such as*ngIf or for the same content to be repeated for each object in a data source such as *ngFor.

You can use the built-in directives for common tasks, but writing custom structural directives provides ability to tailor behavior to your application.

  Expression is true and ngIf is true.
  This paragraph is in the DOM.


  Expression is false and ngIf is false.
  This paragraph is not in the DOM.

Components :

Components are directives that their own templates, rather than relying on content provided from elsewhere. Components have access to all directive features, still have a host element, can still define input and output properties, and so on.But they also define their own content.

It can be easy to underestimate the importance of the template, but attribute and structural directives have limitations. Directives can do useful and powerful work, but they don’t have much insight into the elements they are applied to. Directives are most useful when they are general-purpose tools, such the ngModel directive, which can be applied to any data model property and any form element, without regard to what the data or the element is being used for.

Components, by contrast, are closely tied to the contents of their templates. Components provide the data and logic that will be used by the data bindings that are applied to the HTML elements in the template, which provide the context used to evaluate data binding expressions and act as the glue between the directives and the rest of the application. Components are also a useful tool in allowing large Angular projects to be broken up into manageable chunks.

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    
{{hero.name}} says:
    
I, {{hero.name}}, am at your service, {{masterName}}.
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

from official angular

from Pro-Angular book