Run prettier:ts

app/angular/src/demo/button.component.ts

@@ -3,7 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'storybook-button-component',
   template: `
-      <button (click)="onClick.emit($event);">{{ text }}</button>
+    <button (click)="onClick.emit($event)">{{ text }}</button>
   `,
   styles: [
     `

app/angular/src/demo/welcome.component.ts

@@ -7,40 +7,39 @@ import { Component, Output, EventEmitter } from '@angular/core';
       <h1>Welcome to storybook</h1>
       <p>This is a UI component dev environment for your app.</p>
       <p>
-          We've added some basic stories inside the <span class="inline-code">src/stories</span> directory.
+        We've added some basic stories inside the
-          <br/>
+        <span class="inline-code">src/stories</span> directory. <br />
-          A story is a single state of one or more UI components. You can have as many stories as
+        A story is a single state of one or more UI components. You can have as many stories as you
-          you want.
+        want. <br />
-          <br/>
         (Basically a story is like a visual test case.)
       </p>
       <p>
-          See these sample <a (click)="showApp.emit($event);" role="button" tabIndex="0">stories</a> for a component called
+        See these sample
-          <span class="inline-code">Button</span> .
+        <a (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component
+        called <span class="inline-code">Button</span> .
       </p>
       <p>
-          Just like that, you can add your own components as stories.
+        Just like that, you can add your own components as stories. <br />
-          <br />
+        You can also edit those components and see changes right away. <br />
-          You can also edit those components and see changes right away.
+        (Try editing the <span class="inline-code">Button</span> stories located at
-          <br />
+        <span class="inline-code">src/stories/index.js</span>.)
-          (Try editing the <span class="inline-code">Button</span> stories
-          located at <span class="inline-code">src/stories/index.js</span>.)
       </p>
       <p>
         Usually we create stories with smaller UI components in the app.<br />
-          Have a look at the <a
+        Have a look at the
+        <a
           href="https://storybook.js.org/basics/writing-stories"
           target="_blank"
           rel="noopener noreferrer"
         >
           Writing Stories
-          </a> section in our documentation.
+        </a>
+        section in our documentation.
       </p>
       <p class="note">
-          <b>NOTE:</b>
+        <b>NOTE:</b> <br />
-          <br />
+        Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
-          Have a look at the <span class="inline-code">.storybook/webpack.config.js</span>
+        webpack loaders and plugins you are using in this project.
-          to add webpack loaders and plugins you are using in this project.
       </p>
     </main>
   `,

examples/angular-cli/src/stories/all-knobs.component.ts

@@ -3,16 +3,17 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 @Component({
   selector: 'storybook-simple-knobs-component',
   template: `
-    <div [ngStyle]="{ 'border': '2px dotted ' + border, 'padding.px': '8 22', 'border-radius.px': '8'}">
+    <div
+      [ngStyle]="{ border: '2px dotted ' + border, 'padding.px': '8 22', 'border-radius.px': '8' }"
+    >
       <h1>My name is {{ name }},</h1>
       <h3>today is {{ today | date }}</h3>
       <p *ngIf="stock">I have a stock of {{ stock }} {{ fruit }}, costing $ {{ price }} each.</p>
-      <p *ngIf="!stock">I'm out of {{ fruit }}.</p> <p *ngIf="stock && nice">Sorry.</p>
+      <p *ngIf="!stock">I'm out of {{ fruit }}.</p>
+      <p *ngIf="stock && nice">Sorry.</p>
       <p>Also, I have:</p>
       <ul>
-        <li *ngFor="let item of items">
+        <li *ngFor="let item of items">{{ item }}</li>
-          {{ item }}
-        </li>
       </ul>
       <p *ngIf="nice">Nice to meet you!</p>
       <p *ngIf="!nice">Leave me alone!</p>

examples/angular-cli/src/stories/custom-ng-content.stories.ts

@@ -3,7 +3,9 @@ import { storiesOf } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-with-ng-content',
-  template: `<div style="color: #1e88e5;"><ng-content></ng-content></div>`,
+  template: `
+    <div style="color: #1e88e5;"><ng-content></ng-content></div>
+  `,
 })
 class WithNgContentComponent {}
 

examples/angular-cli/src/stories/moduleMetadata/name.component.ts

@@ -2,7 +2,9 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'storybook-name',
-  template: `<h1>{{ field | customPipe }}</h1>`,
+  template: `
+    <h1>{{ field | customPipe }}</h1>
+  `,
 })
 export class NameComponent {
   @Input()

examples/angular-cli/src/stories/moduleMetadata/service.component.ts

@@ -6,9 +6,7 @@ import { DummyService } from './dummy.service';
   template: `
     <p>{{ name }}:</p>
     <ul>
-      <li *ngFor="let item of items">
+      <li *ngFor="let item of items">{{ item }}</li>
-        {{ item }}
-      </li>
     </ul>
   `,
 })

examples/angular-cli/src/stories/moduleMetadata/token.component.ts

@@ -9,9 +9,7 @@ export const DEFAULT_NAME = new InjectionToken<string>('TokenComponent.DefaultNa
     <h3>{{ name }}</h3>
     <p>Items:</p>
     <ul>
-      <li *ngFor="let item of items">
+      <li *ngFor="let item of items">{{ item }}</li>
-        {{ item }}
-      </li>
     </ul>
   `,
 })