### Put Logic in the Component Class

Author: johnpapa

public/docs/ts/latest/guide/style-guide.jade

@@ -739,6 +739,59 @@ a(id='toc')
   <toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>
   ```
 
+<a href="#toc">Back to top</a>
+:marked
+  ### Put Logic in the Component Class
+  <a id="04-16"></a>
+  #### Style 04-16
+
+    - Put Component logic in the Component class, and not in the template.
+
+      *​*Why?**​: Logic will be contained in one place (the Component class) instead of being spread in two places.
+      
+      *​*Why?**​: Keeping the logic of the components in their controller, instead of template will improve testability, maintability, reusability.
+  
+    ```typescript
+    /* avoid */
+    @Component({
+      selector: 'toh-heroes-list',
+      template: `
+        <section>
+          Your list of heroes:
+          <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+          </hero-profile>
+          Total powers: {{totalPowers}}<br>
+          Average power: {{totalPowers / heroes.length}}
+        </section>
+      `
+    })
+    export class HeroesListComponent {
+      heroes: Hero[];
+      totalPowers: number;
+    }
+    ```
+    
+    ```typescript
+    /* recommended */
+    @Component({
+      selector: 'toh-heroes-list',
+      template: `
+        <section>
+          Your list of heroes:
+          <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+          </hero-profile>
+          Total powers: {{totalPowers}}<br>
+          Average power: {{avgPower}}
+        </section>
+      `
+    })
+    export class HeroesListComponent {
+      heroes: Hero[];
+      totalPowers: number;
+      avgPower: number;
+    }
+    ```
+
 <a href="#toc">Back to top</a>
 :marked
   ## Directives