Updates Angular Renderer referenced to Renderer2

components/table/ng-table-filtering.directive.ts

@@ -1,7 +1,7 @@
-import { Directive, EventEmitter, ElementRef, Renderer, HostListener, Input, Output } from '@angular/core';
+import { Directive, EventEmitter, ElementRef, Renderer2, HostListener, Input, Output } from '@angular/core';
 
 // import {setProperty} from 'angular2/ts/src/core/forms/directives/shared';
-function setProperty(renderer:Renderer, elementRef:ElementRef, propName:string, propValue:any):void {
+function setProperty(renderer:Renderer2, elementRef:ElementRef, propName:string, propValue:any):void {
   renderer.setElementProperty(elementRef, propName, propValue);
 }
 
@@ -24,15 +24,15 @@ export class NgTableFilteringDirective {
   }
 
   private element:ElementRef;
-  private renderer:Renderer;
+  private renderer:Renderer2;
 
   @HostListener('input', ['$event.target.value'])
   public onChangeFilter(event:any):void {
     this.ngTableFiltering.filterString = event;
     this.tableChanged.emit({filtering: this.ngTableFiltering});
   }
 
-  public constructor(element:ElementRef, renderer:Renderer) {
+  public constructor(element:ElementRef, renderer:Renderer2) {
     this.element = element;
     this.renderer = renderer;
     // Set default value for filter

webpack.config.js

@@ -2,10 +2,10 @@
 /**
  * @author: @AngularClass
  */
-'use strict';
+"use strict";
 
-const reqPrism = require('prismjs');
-const marked = require('marked');
+const reqPrism = require("prismjs");
+const marked = require("marked");
 
 marked.Renderer.prototype.code = function renderCode(code, lang) {
   const out = this.options.highlight(code, lang);
@@ -17,35 +17,45 @@ marked.Renderer.prototype.code = function renderCode(code, lang) {
   return `<pre class="${classMap}"><code class="${classMap}">${out}\n</code></pre>\n`;
 };
 
+marked.Renderer2.prototype.code = function renderCode(code, lang) {
+  const out = this.options.highlight(code, lang);
+  const classMap = this.options.langPrefix + lang;
+
+  if (!lang) {
+    return `<pre><code>${out}\n</code></pre>`;
+  }
+  return `<pre class="${classMap}"><code class="${classMap}">${out}\n</code></pre>\n`;
+};
+
 // Look in ./config folder for webpack.dev.js
-const conf = getWebpackConfig(process.env.NODE_ENV, require('./.ng2-config'));
+const conf = getWebpackConfig(process.env.NODE_ENV, require("./.ng2-config"));
 
 conf.markdownLoader = {
-  langPrefix: 'language-',
+  langPrefix: "language-",
   highlight(code, lang) {
-    const language = !lang || lang === 'html' ? 'markup' : lang;
+    const language = !lang || lang === "html" ? "markup" : lang;
     const Prism = global.Prism || reqPrism;
 
     if (!Prism.languages[language]) {
       require(`prismjs/components/prism-${language}.js`);
     }
     return Prism.highlight(code, Prism.languages[language]);
-  }
+  },
 };
 
 module.exports = conf;
 
 function getWebpackConfig(env, config) {
   switch (env) {
-  case 'prod':
-  case 'production':
-    return require('ng2-webpack-config').webpack.prod(config);
-  case 'test':
-  case 'testing':
-    return require('ng2-webpack-config').webpack.test(config);
-  case 'dev':
-  case 'development':
-  default:
-    return require('ng2-webpack-config').webpack.dev(config);
+    case "prod":
+    case "production":
+      return require("ng2-webpack-config").webpack.prod(config);
+    case "test":
+    case "testing":
+      return require("ng2-webpack-config").webpack.test(config);
+    case "dev":
+    case "development":
+    default:
+      return require("ng2-webpack-config").webpack.dev(config);
   }
 }