Merge pull request #17 from brunolm/feature/create-pipe-markdown

Feature/create pipe markdown

README.md

@@ -55,3 +55,7 @@ Each Pull Request will contain explanation and steps taken to complete a feature
 ## Services
 
 - [Adding Nasa service, consume Nasa API](https://github.com/brunolm/angular-how-to/pull/15)
+
+## Pipes
+
+- [Add markdown pipe (convert text to markdown)](https://github.com/brunolm/angular-how-to/pull/17)

package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^4.0.0-beta.2",
     "camelcase-keys": "^4.2.0",
     "core-js": "^2.4.1",
+    "marked": "^0.4.0",
     "ngx-redux-state-props": "0.0.6",
     "ngx-take-until-destroy": "^3.0.0",
     "redux": "^4.0.0",
@@ -45,6 +46,7 @@
     "@angular/language-service": "^6.0.5",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
+    "@types/marked": "^0.4.0",
     "@types/node": "~6.0.60",
     "codelyzer": "^4.3.0",
     "coveralls": "^3.0.0",

src/app/about/about.component.html

@@ -5,6 +5,8 @@
 </div>
 
 <button (click)="testRedux()" class="btn btn-primary">Test redux</button>
+-
+<button class="btn btn-primary" (click)="getNasaApod()">APOD</button>
 
 <div>
   <h2>App State</h2>
@@ -13,4 +15,6 @@ <h2>App State</h2>
 
 <hr>
 
-<button class="btn btn-primary" (click)="getNasaApod()">APOD</button>
+<textarea style="width: 100%; height: 200px" [(ngModel)]="md"></textarea>
+
+<div [innerHTML]="md | markdown"></div>

src/app/about/about.component.ts

@@ -10,6 +10,13 @@ import { AboutActions } from './services/about.actions';
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent {
+  md = `# Write some markdown
+- here and
+- here
+- then
+  - here
+    - or here`;
+
   constructor(private actions: AboutActions, private redux: NgxReduxStatePropsService<AppState>) {}
 
   get state() {

src/app/about/about.module.ts

@@ -1,12 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
+import { SharedModule } from '../shared/shared.module';
 import { AboutComponent } from './about.component';
 import { RoutingModule } from './about.router';
 import { AboutActions } from './services/about.actions';
 
 @NgModule({
-  imports: [RoutingModule, CommonModule],
+  imports: [RoutingModule, CommonModule, SharedModule, FormsModule],
   declarations: [AboutComponent],
   providers: [AboutActions],
 })

src/app/shared/markdown.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { MarkdownPipe } from './markdown.pipe';
+
+describe('MarkdownPipe', () => {
+  it('create an instance', () => {
+    const pipe = new MarkdownPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/shared/markdown.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as marked from 'marked';
+
+@Pipe({
+  name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+  transform(value: any, _?: any) {
+    return marked(value);
+  }
+}

src/app/shared/shared.module.ts

@@ -4,11 +4,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { LayoutComponent } from './layout/layout.component';
+import { MarkdownPipe } from './markdown.pipe';
 import { TitleComponent } from './title/title.component';
 
 @NgModule({
   imports: [CommonModule, RouterModule, HttpClientModule],
-  exports: [LayoutComponent, TitleComponent],
-  declarations: [LayoutComponent, TitleComponent],
+  exports: [LayoutComponent, TitleComponent, MarkdownPipe],
+  declarations: [LayoutComponent, TitleComponent, MarkdownPipe],
 })
 export class SharedModule {}