Create a Directive

[web-dave]

• Generate a order-btn directive
• It should add a button to buy this Book

[web-dave]

generate

  ng g d books/shared/order-btn

[web-dave]

order-btn.directive.ts

import { Directive, Input, ElementRef, OnChanges, HostListener } from '@angular/core';

@Directive({
  selector: '[orderBtn]'
})
export class OrderBtnDirective implements OnChanges {
  orderBtnElement: HTMLButtonElement = document.createElement('button');

  @Input() orderBtn;

  ngOnChanges(changeObj) {

    this.orderBtnElement.innerText = this.orderBtn;
  }

  @HostListener('mouseenter') onMouseEnter() {
    console.log('mouseenter');
  }

  @HostListener('mouseleave') onMouseLeave() {
    console.log('mouseleave');
  }

  constructor(private elementRef: ElementRef) {
    elementRef.nativeElement.appendChild(this.orderBtnElement);
    this.orderBtnElement.onclick = () => {
      console.log('this.orderBtn:', this.orderBtn)
    }
  }

}

[web-dave]

book-details.component.html

  <div class="panel-body" orderBtn="Buy me!!">
    ...
 </div>

[web-dave]

<div class="panel-body" [orderBtn]="book">
    ...
 </div>