How to add several directives to a single component

Question

Hello first of all I must say I am sorry but I don't know how to express the question better, is the reason I am not being able to find an answer by myself.

What I'm talking about is how to load a component inside another one, I need to indicate it in the directive. Here is a very small example that I did from scratch because I am not able to find the right syntax:

http://plnkr.co/edit/gFsqGJmmayOsewL3EfLf

import {Component} from 'angular2/core'
import {Prueba} from './prueba'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <prueba></prueba>      
    </div>
  `,
  directives: [Prueba]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

So as you can see in app.ts there is a directives inside component, if I remove that it does not work. I am not 100% sure why, but it's how I learned.

So next step, I wanted to have several components, so I can have Prueba and another that adds something extra (for starters, another "phrase", but the idea is to add something similar to THIS: http://plnkr.co/edit/SVPNwk?p=preview ). However I find myself unable to find the right syntax, anything I try makes even this simple example to fail.

As I said, I do not understand what am I missing, I have a new component, I import it, I use the selector, and so on, but it simply explodes. What concepts am I missing?

If I am still not explaining myself properly enough, this is the theoric concept I am talking about:

angular.io/docs/ts/latest/cheatsheet.html (I cannot post more than two links... anyway its the @Component part, that's the documentation I'm checking out).

Answer 1

In Angular2 there is a difference between a component and a directive:

• A component gathers a view (template) with some properties and processing (the component class)
• There are two kinds of directives:
  • Attribute directive. It changes the appearance or behavior of a DOM element
  • Structural directive. It changes the DOM layout by adding and removing DOM elements.

A component can be used in another component using its selector. You need to explicitly define it in the directives attribute of the container component. Whereas the attribute is called directives, you can put in it both components and directives. You can also provide parameters to a component and react on its events.

Here is a sample:

• Sub component

  @Component({
    selector: 'sub',
    template: `
      <div>Sub</div>
    `
  })
  export class SubComponent {
  }
  

• Container component:

  @Component({
    selector: 'comp',
    template: `
      <div>
        <sub></sub>
      </div>
    `,
    directives: [ SubComponent, AnotherComponent ]
  })
  export class ContainerComponent {
  }
  

A directive will apply on an existing element also based on it selector.

Here is a sample:

• Sub component

  @Directive({
    selector: '[dir]'
  })
  export class DirDirective {
    constructor(el: ElementRef) {
      // el.nativeElement corresponds to the DOM element
      // the directive applies on
      el.nativeElement.style.backgroundColor = 'yellow';
    }
  }
  

• Container component:

  @Component({
    selector: 'comp',
    template: `
      <div dir>Some text</div>
    `,
    directives: [ DirDirective ]
  })
  export class ContainerComponent {
  }
  

The directives attribute

To tell a bit more about the directives attribute. If the component / directive isn't a platform one, you need to explicitly define into this directive. If not, the component / directive won't apply.

This attribute can accept several values since it's an array:

@Component({
  selector: 'comp',
  template: `
    <div>
      <sub></sub>
      <another></another>
    </div>
  `,
  directives: [ SubComponent, AnotherComponent ]
})
export class ContainerComponent {
}