What directives do in Angular 2?

To be short, directives don't have a template whereas components have. There are several directive kinds:

• Attribute directives: that aim changes the appearance or behavior of a DOM element. See this page for more details: https://angular.io/docs/ts/latest/guide/attribute-directives.html.
• Structural directives: that change the DOM layout by adding and removing DOM elements. They rely on a template element as input and can use syntax shortcut / sugar to use them. See this page for more details: https://angular.io/docs/ts/latest/guide/structural-directives.html

Actually directives are still here in Angular 2. The component is just the most important type of a directive, but not the only one. A component is a directive with a template. But you can still write decorator-style directives, which do not have templates. Here we don’t have a .directive function like in Angular 1, instead we have simple classes that gets annotated to give them a certain behavior. The annotations to import a Component is:

import {Component} from 'angular2/core'; 

Hope you are doing well.

Based on the snippets you shared above, you are confused between two different types of terminologies in Angular. Let me explain it one by one.

The first snippet you shared was:

 @Component({ selector: 'hero-app', template: ` <h1>Tour of Heroes</h1> <hero-app-main [hero]=hero></hero-app-main>`, styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] }) 

This is the snippet of a Component(as you can see the selector denoted by '@Component' selector). Components are basic building blocks in Angular which provide a way of writing HTML code in your Application bundled with some logical part(Generally in a TypeScript file) something like this:

app.component.html

<a [href] = "link">Link to...</a> 

app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, OnDestroy { link : any = 'https: www.google.com'; constructor(){ } ngOnInit() : void { } ngOnDestroy(): void { } } 

The second snippet you shared is of a Directive(denoted by a '@Directive'). Directives are only logics which you write to basically manipulate DOM functionality in your app(something like changing the structure of a dropdown on it's click). Basically you can only write logics in Directives and not the HTML part. Here is an basic example:

import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private eleRef: ElementRef) { eleRef.nativeElement.style.background = 'red'; } } 

In this directive, we are highlighting the selected DOM element by setting an element’s background color.

So, basically Components are a subset of Directives where you can write both HTML(the template part) & TS(the logic part). While for the Directives you can write only the TS(logic part)

More information on Component vs directives here Hope this helps.