When use a directive or reusable component on Angular 2 or Angular 4?

Question

I have this following code:

<button class="btn form-control cayena-color-picker" btnCheckbox [popover]="myPopover" [ngClass]="selectedColor == null ? 'btn-default btn-fill' : selectedColor">
          </button>

          <popover-content #myPopover title="Selector de colores" [closeOnClickOutside]="true">
              <div class="color-palette blue1" (click)="setColor('blue1')" style="cursor:pointer"></div>
              <div class="color-palette blue2" (click)="setColor('blue2')" style="cursor:pointer"></div>
              <div class="color-palette blue3" (click)="setColor('blue3')" style="cursor:pointer"></div>
              <div class="color-palette yellow1" (click)="setColor('yellow1')" style="cursor:pointer"></div>
              <div class="color-palette yellow2" (click)="setColor('yellow2')" style="cursor:pointer"></div>
              <div class="color-palette yellow3" (click)="setColor('yellow3')" style="cursor:pointer"></div>
              <br>
              <div class="color-palette red1" (click)="setColor('red1')" style="cursor:pointer"></div>
              <div class="color-palette red2" (click)="setColor('red2')" style="cursor:pointer"></div>
              <div class="color-palette red3" (click)="setColor('red3')" style="cursor:pointer"></div>
              <div class="color-palette green1" (click)="setColor('green1')" style="cursor:pointer"></div>
              <div class="color-palette green2" (click)="setColor('green2')" style="cursor:pointer"></div>
              <div class="color-palette green3" (click)="setColor('green3')" style="cursor:pointer"></div>
              <br>
              <div class="color-palette gray1" (click)="setColor('gray1')" style="cursor:pointer"></div>
              <div class="color-palette gray2" (click)="setColor('gray2')" style="cursor:pointer"></div>
              <div class="color-palette gray3" (click)="setColor('gray3')" style="cursor:pointer"></div>
              <div class="color-palette violet1" (click)="setColor('violet1')" style="cursor:pointer"></div>
              <div class="color-palette violet2" (click)="setColor('violet2')" style="cursor:pointer"></div>
              <div class="color-palette violet3" (click)="setColor('violet3')" style="cursor:pointer"></div>              
          </popover-content>

I would like to re-use this code on another parts of my code. This code is a pop-over that shows a custom color picker. What do you recommend me to use? I must to use a directive to re-use this code or i should use a component and call hem when i need? What are the best practices?

Thanks a lot.

Possible duplicate of [@Directive v/s @Component in angular2](http://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular2) — Akkusativobjekt, May 19 '17 at 13:07
Or ... http://stackoverflow.com/questions/34613065/what-is-the-difference-between-component-and-directive — daan.desmedt, May 19 '17 at 13:09
@Akkusativobjekt i don't ask for know 'what difference' are between Directive and Component. — Ali Briceño, May 19 '17 at 13:09
"What do you recommend me to use? I must to use a directive to re-use this code or i should use a component and call hem when i need?" - Sorry to say but your words do indicate that you need to have a better understanding of the difference between `Directive` and `Component` — daan.desmedt, May 19 '17 at 13:11

score 1 · Accepted Answer · answered May 19 '17 at 13:13

One option is to use a component and you can do that this way:

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

@Component({
    selector: 'popover',
    template: `
      <popover-content #myPopover title="Selector de colores" [closeOnClickOutside]="true">
          <div class="color-palette blue1" (click)="onSetColor('blue1')" style="cursor:pointer"></div>
          ...
          <div class="color-palette violet3" (click)="onSetColor('violet3')" style="cursor:pointer"></div>              
      </popover-content>
    `
})
export class PopoverComponent {
  @Output() setcolor: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  onSetColor(color: string) {
    this.setColor.emit(color);
  }
}

Then you can use it in another component with the following code and grab the colors through the setColor output.

<popover (setColor)="onSetColor($event)"></popover>

Hope that helps.

Thanks my friend... Works well – Ali Briceño May 19 '17 at 19:53 — Ali Briceño, May 19 '17 at 19:53

When use a directive or reusable component on Angular 2 or Angular 4?

1 Answers1