Can you have a separate directive in Angular 2

Question

I play with Angular 2, what I would like to do is to have a separate directive directly assigned to an element inside HTML. Is it possible?

Directive

import {Directive, ElementRef} from 'angular2/core';
@Directive({
    selector: '[Slidernav]'
})
export class Slidernav {
    constructor(private element: ElementRef) {
        console.log('Slider Run');
    }
}

and I would assign it to any HTML element, for example:

<div slidernav>Some content</div>

The reason I'm asking is because I don't want to install a template with HTML that already exists in the DOM using the component.

EDIT

So based on the answers, this is a component

Component slider

 import {Component, View, ElementRef} from 'angular2/core';
 @Component({
    selector: 'Slider',
    template: '<ng-content></ng-content>'
 })
 export class Slider {
     constructor(private element: ElementRef) {
         console.log('Slider');
     }
}

index.html

<Slider>
    <div>hello world</div>
</Slider>

I would expect Div to stay in Slider with hello world content. AFAIK, that it should work based on what I read about Transclusion. But console error:

Error: The component Slider has 1 <ng-content> elements, but only 0 slots were provided.

Answer 1

, , Angular

selector: '[Slidernav]'
...
<div slidernav>Some content</div>

selector: '[Slidernav]'
...
<div slidernav>Some content</div>

selector: '[Slidernav]'
...
<div slidernav>Some content</div>

, ,

template: '<ng-content></ng-content>`

, HTML ,