Create a Directive

[web-dave]

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

[web-dave]

generate

```bash ng g d books/shared/order-btn ```

order-btn.directive.ts

```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: string; 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) } } } ```

book-details.component.html

```html

...

``` OR advanced: ```html

...

```

[web-dave]

Next