Fix plugins using Data input property (#136)

Author: jfcere

demo/src/app/app.component.html

@@ -193,7 +193,7 @@ <h2 class="subtitle">Pipe Usage</h2>
       <br />
 
       <markdown>
-        In the example below, `pipeMarkdown` property does not contain any `back-ticks` to set the content language but will be chain with `language` pipe instead to specify synthax highlights language along with `markdown` pipe for conversion
+        In the following example using the synthax above, `typescriptMarkdown` property does not contain any `back-ticks` to set the content language but will be chain with `language` pipe instead to specify synthax highlights language along with `markdown` pipe for conversion
       </markdown>
 
       <textarea class="pipe-textarea" [(ngModel)]="typescriptMarkdown"></textarea>

demo/src/app/app.component.ts

@@ -48,21 +48,6 @@ public markdown = "# Markdown";
   //#endregion
 
   //#region pipe
-  pipeMarkdown =
-`### Markdown example
----
-This is an **example** where we use a variable with the \`markdown\` pipe that is also bind to a textarea. Using the pipe allows to chain pipe transformation.
-
-#### example.component.ts
-\`\`\`typescript
-public pipeMarkdown = "# Markdown";
-\`\`\`
-
-#### example.component.html
-\`\`\`html
-<textarea [(ngModel)]="pipeMarkdown"></textarea>
-<div [innerHTML]="pipeMarkdown | markdown"></div>
-\`\`\``;
   typescriptMarkdown =
 `import { Component } from '@angular/core';
 

demo/src/app/remote/markdown-pipe.html

@@ -1 +1 @@
-<div [innerHTML]="markdown | language : 'typescript' | markdown"></div>
+<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown",
-  "version": "7.1.3",
+  "version": "7.1.4-beta.0",
   "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights",
   "homepage": "https://github.com/jfcere/ngx-markdown",
   "license": "MIT",

lib/src/markdown.component.spec.ts

@@ -1,7 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { ElementRef } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable, of, throwError } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 import { MarkdownComponent } from './markdown.component';
 import { MarkdownService } from './markdown.service';
@@ -40,6 +40,8 @@ describe('MarkdownComponent', () => {
 
       component.data = mockData;
 
+      component.ngOnChanges();
+
       expect(component.render).toHaveBeenCalledWith(mockData);
     });
 
@@ -65,6 +67,8 @@ describe('MarkdownComponent', () => {
 
       component.src = mockSrc;
 
+      component.ngOnChanges();
+
       expect(markdownService.getSource).toHaveBeenCalledWith(mockSrc);
       expect(component.render).toHaveBeenCalledWith(mockContent);
     }));
@@ -80,6 +84,21 @@ describe('MarkdownComponent', () => {
       expect(component.src).toBe(mockSrc);
     });
 
+    it('should emit load when get', () => {
+
+      const mockSrc = './src-example/file.md';
+      const mockSrcReturn = 'src-return-value';
+
+      spyOn(markdownService, 'getSource').and.returnValue(of(mockSrcReturn));
+      spyOn(component.load, 'emit');
+
+      component.src = mockSrc;
+
+      component.ngOnChanges();
+
+      expect(component.load.emit).toHaveBeenCalledWith(mockSrcReturn);
+    });
+
     it('should emit error when and error occurs', () => {
 
       const mockSrc = './src-example/file.md';
@@ -90,6 +109,8 @@ describe('MarkdownComponent', () => {
 
       component.src = mockSrc;
 
+      component.ngOnChanges();
+
       expect(component.error.emit).toHaveBeenCalledWith(mockError);
     });
   });

lib/src/markdown.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 
 import { MarkdownService } from './markdown.service';
 import { PrismPlugin } from './prism-plugin';
@@ -8,37 +8,9 @@ import { PrismPlugin } from './prism-plugin';
   selector: 'markdown, [markdown]',
   template: '<ng-content></ng-content>',
 })
-export class MarkdownComponent implements AfterViewInit {
-  private _data: string;
-  private _lineHighlight = false;
-  private _lineNumbers = false;
-  private _src: string;
-
-  private get _isTranscluded() {
-    return !this._data && !this._src;
-  }
-
-  @Input()
-  get data(): string { return this._data; }
-  set data(value: string) {
-    this._data = value;
-    this.render(value);
-  }
-
-  @Input()
-  get src(): string { return this._src; }
-  set src(value: string) {
-    this._src = value;
-    this.markdownService
-      .getSource(value)
-      .subscribe(
-        markdown => {
-          this.render(markdown);
-          this.load.emit(markdown);
-        },
-        error => this.error.emit(error),
-      );
-  }
+export class MarkdownComponent implements OnChanges, AfterViewInit {
+  @Input() data: string;
+  @Input() src: string;
 
   // Plugin - lineNumbers
   @Input()
@@ -56,14 +28,28 @@ export class MarkdownComponent implements AfterViewInit {
   @Output() error = new EventEmitter<string>();
   @Output() load = new EventEmitter<string>();
 
+  private _lineHighlight = false;
+  private _lineNumbers = false;
+
   constructor(
     public element: ElementRef<HTMLElement>,
     public markdownService: MarkdownService,
   ) { }
 
+  ngOnChanges() {
+    if (this.data) {
+      this.handleData();
+      return;
+    }
+    if (this.src) {
+      this.handleSrc();
+      return;
+    }
+  }
+
   ngAfterViewInit() {
-    if (this._isTranscluded) {
-      this.render(this.element.nativeElement.innerHTML, true);
+    if (!this.data && !this.src) {
+      this.handleTransclusion();
     }
   }
 
@@ -77,6 +63,26 @@ export class MarkdownComponent implements AfterViewInit {
     return value != null && `${value}` !== 'false';
   }
 
+  private handleData() {
+    this.render(this.data);
+  }
+
+  private handleSrc() {
+    this.markdownService
+      .getSource(this.src)
+      .subscribe(
+        markdown => {
+          this.render(markdown);
+          this.load.emit(markdown);
+        },
+        error => this.error.emit(error),
+      );
+  }
+
+  private handleTransclusion() {
+    this.render(this.element.nativeElement.innerHTML, true);
+  }
+
   private handlePlugins() {
     if (this.lineHighlight) {
       this.setPluginClass(this.element.nativeElement, PrismPlugin.LineHighlight);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown",
-  "version": "7.1.3",
+  "version": "7.1.4-beta.0",
   "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights",
   "homepage": "https://github.com/jfcere/ngx-markdown",
   "license": "MIT",