feat(package): added matLinkPreview directive to find and render links

Author: AnthonyNahas

src/module/directives/mat-link-preview.directive.spec.ts

@@ -0,0 +1,8 @@
+import { MatLinkPreviewDirective } from './mat-link-preview.directive';
+
+describe('MatLinkPreviewDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MatLinkPreviewDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/module/directives/mat-link-preview.directive.ts

@@ -0,0 +1,36 @@
+import {Directive, OnInit} from '@angular/core';
+import {fromEvent} from 'rxjs';
+import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';
+import {Link, NgxLinkifyjsService} from 'ngx-linkifyjs';
+import {LinkPreviewService} from '../..';
+
+@Directive({
+  selector: '[matLinkPreview]'
+})
+export class MatLinkPreviewDirective implements OnInit {
+
+  constructor(public linkifyService: NgxLinkifyjsService,
+              public linkPreviewService: LinkPreviewService) {
+  }
+
+  ngOnInit(): void {
+    this._init();
+  }
+
+  private _init() {
+    fromEvent(document, 'input')
+      .pipe(
+        debounceTime(2000),
+        distinctUntilChanged(),
+        map(event => {
+          const data = event.target['value'];
+          const links: Link[] = this.linkifyService.find(data);
+          console.log('data: ', data);
+          console.log('links: ', links);
+          return links;
+        })).subscribe((links) => {
+      this.linkPreviewService.onLinkFound.emit(links);
+    });
+  }
+
+}