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.

Answer 1

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.