From 2b6275a0b43805714dd1931e60e083e0018183c3 Mon Sep 17 00:00:00 2001
From: Yuriy Berg <art.haacki@gmail.com>
Date: Fri, 20 Jul 2018 17:57:50 +0300
Subject: [PATCH] Added docs: how to use renderer with angular

---
 tutorials/tutorials.json                      |   3 +
 .../wrapper-for-angular-use-renderer.html     | 177 ++++++++++++++++++
 2 files changed, 180 insertions(+)
 create mode 100644 tutorials/wrapper-for-angular-use-renderer.html

diff --git a/tutorials/tutorials.json b/tutorials/tutorials.json
index b45555e..56f754a 100644
--- a/tutorials/tutorials.json
+++ b/tutorials/tutorials.json
@@ -272,6 +272,9 @@
           },
           "wrapper-for-angular-examples": {
             "title": "Examples"
+          },
+          "wrapper-for-angular-use-renderer": {
+            "title": "Use renderer"
           }
         }
       },
diff --git a/tutorials/wrapper-for-angular-use-renderer.html b/tutorials/wrapper-for-angular-use-renderer.html
new file mode 100644
index 0000000..8ad5a64
--- /dev/null
+++ b/tutorials/wrapper-for-angular-use-renderer.html
@@ -0,0 +1,177 @@
+<div class="static-content">
+  <div class="example-container clearfix">
+
+    <p>Table cells can be set up with renderer method. Renderers helps you customize data in cells</p>
+
+    <p>There is simple renderer method which get data from current row, and customizing cell name</p>
+
+    <div>
+      <app-root></app-root>
+    </div>
+    <script type="text/x-hot-html" data-jsfiddle="example1">
+      <app-root></app-root>
+    </script>
+
+    <div class="codeLayout">
+      <div class="buttons">
+        <button class="jsFiddleLink" data-runfiddle="example1">
+          <i class="fa fa-jsfiddle"></i>
+          Edit
+        </button>
+      </div>
+      <script type="text/typescript" data-jsfiddle="example1" data-jsfiddle-panel_js="4">
+        // app.component.ts
+        import { Component } from '@angular/core';
+        import * as Handsontable from 'handsontable';
+        
+        @Component({
+          selector: 'app-root',
+          template: `
+            <hot-table [data]="dataset" [settings]="settings"></hot-table>
+          `
+        })
+        class AppComponent {
+          dataset: any[] = [
+            {id: 1, name: 'Ted Right', address: 'Wall Street', gender: 'male'},
+            {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue', gender: 'male'},
+            {id: 3, name: 'Joan Well', address: 'Broadway', gender: 'female'},
+            {id: 4, name: 'Gail Polite', address: 'Bourbon Street', gender: 'male'},
+            {id: 5, name: 'Michael Fair', address: 'Lombard Street', gender: 'male'},
+            {id: 6, name: 'Mia Fair', address: 'Rodeo Drive', gender: 'female'},
+            {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard', gender: 'female'},
+            {id: 8, name: 'Jack Right', address: 'Michigan Avenue', gender: 'male'},
+          ];
+          
+          settings = {
+            columns: [
+              {
+                title: 'ID',
+                data: 'id'
+              },
+              {
+                title: 'User name',
+                data: 'name',
+                renderer: (instance, td, row, column, prop, value) => {
+                  // Current item from dataset array
+                  const person = instance.getSourceDataAtRow(row);
+                  
+                  if (person.gender === 'male') {
+                    td.innerHTML = `<span class="color-warn">Mr.</span> ${person.name}`;
+                  } else {
+                    td.innerText = `Mrs. ${person.name}`;
+                  }
+                }
+              },
+              {
+                title: 'Address',
+                data: 'address'
+              }
+            ]
+          }
+        }
+        
+        // app.module.ts
+        import { NgModule } from '@angular/core';
+        import { BrowserModule } from '@angular/platform-browser';
+        import { HotTableModule } from '@handsontable/angular';
+        
+        @NgModule({
+          imports:      [ BrowserModule, HotTableModule ],
+          declarations: [ AppComponent ],
+          bootstrap:    [ AppComponent ]
+        })
+        class AppModule { }
+        
+        // bootstrap
+        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+        
+        platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
+      </script>
+
+      <p>If table set up with <code>hot-column</code> there is another way for create renderer as a method.</p>
+
+      <p>The result will be the same as above.</p>
+  </div>
+
+  <div class="codeLayout">
+      <div class="buttons">
+        <button class="jsFiddleLink" data-runfiddle="example2">
+          <i class="fa fa-jsfiddle"></i>
+          Edit
+        </button>
+      </div>
+      <script type="text/typescript" data-jsfiddle="example2" data-jsfiddle-panel_js="4">
+          // app.component.ts
+          import { Component } from '@angular/core';
+          import * as Handsontable from 'handsontable';
+          
+          @Component({
+            selector: 'app-root',
+            template: `
+              <hot-table [data]="dataset">
+                <hot-column data="id" title="ID"></hot-column>
+                <hot-column data="name" title="User name" [renderer]="customRenderer"></hot-column>
+                <hot-column data="address" title="Address"></hot-column>
+              </hot-table>
+            `
+          })
+          class AppComponent {
+            dataset: any[] = [
+              {id: 1, name: 'Ted Right', address: 'Wall Street', gender: 'male'},
+              {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue', gender: 'male'},
+              {id: 3, name: 'Joan Well', address: 'Broadway', gender: 'female'},
+              {id: 4, name: 'Gail Polite', address: 'Bourbon Street', gender: 'male'},
+              {id: 5, name: 'Michael Fair', address: 'Lombard Street', gender: 'male'},
+              {id: 6, name: 'Mia Fair', address: 'Rodeo Drive', gender: 'female'},
+              {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard', gender: 'female'},
+              {id: 8, name: 'Jack Right', address: 'Michigan Avenue', gender: 'male'},
+            ];
+            // Create class method, and putted it as a binding to <hot-column>
+            customRenderer(instance, td, row, column, prop, value) {
+                // Current item from dataset array
+                    const person = instance.getSourceDataAtRow(row);
+                    
+                    if (person.gender === 'male') {
+                      td.innerHTML = `<span class="color-warn">Mr.</span> ${person.name}`;
+                    } else {
+                      td.innerText = `Mrs. ${person.name}`;
+                    }
+            }
+          }
+          
+          // app.module.ts
+          import { NgModule } from '@angular/core';
+          import { BrowserModule } from '@angular/platform-browser';
+          import { HotTableModule } from '@handsontable/angular';
+          
+          @NgModule({
+            imports:      [ BrowserModule, HotTableModule ],
+            declarations: [ AppComponent ],
+            bootstrap:    [ AppComponent ]
+          })
+          class AppModule { }
+          
+          // bootstrap
+          import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+          
+          platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
+      </script>
+    </div>
+
+  </div>
+    <p>
+      <a href="https://github.com/handsontable/docs/edit/<?js= version ?>/tutorials/wrapper-for-angular-use-renderer.html"
+         class="edit-doc" target="_blank">Help us improve this page</a>
+    </p>
+</div>
+<script data-jsfiddle="common" src="/<?js= env.opts.query.version ?>/scripts/jsfiddle-fixer.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/rxjs@6.1.0/bundles/rxjs.umd.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/core-js@2.5.6/client/core.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/zone.js@0.8.26/dist/zone.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/compiler@6.0.0/bundles/compiler.umd.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/core@6.0.0/bundles/core.umd.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/common@6.0.0/bundles/common.umd.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@6.0.0/bundles/platform-browser.umd.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@6.0.0/bundles/platform-browser-dynamic.umd.min.js"></script>
+<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@handsontable/angular@2.0.0/bundles/handsontable-angular.umd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.9.2/typescript.min.js"></script>