include ../../../../_includes/_util-fns +includeShared('../../../ts/latest/guide/template-syntax.jade', 'intro') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'html-1') +makeExample('template-syntax/dart/lib/app_component.html', 'my-first-app')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'html-2') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-1') +makeExample('template-syntax/dart/lib/app_component.html', 'first-interpolation')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-2') +makeExample('template-syntax/dart/lib/app_component.html', 'title+image')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-3') +makeExample('template-syntax/dart/lib/app_component.html', 'sum-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-4') +makeExample('template-syntax/dart/lib/app_component.html', 'sum-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'interpolation-5') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-1') :marked We write template expressions in a language that looks like Dart. Many Dart expressions are legal template expressions, but not all. Dart expressions that have or promote side effects are prohibited, including: **[QUESTION: is this list correct? I removed mentions of chaining with , and ;.]** * assignments (`=`, `+=`, `-=`, ...) * creating instances using `new` or `const` * increment and decrement (`++` and `--`) Other notable differences from Dart syntax include: **[QUESTION: I wasn't able to use Dart interpolation inside a String, which I had just assumed would work. How should we talk about that? What else isn't allowed?]** * no support for the bitwise operators `|` and `&` * new [template expression operators](#expression-operators), such as `|` .callout.is-helpful header Dart difference: Template expression operators :marked [PENDING: say something about stuff you might find in a24ts template expressions but not in dart template expressions, and vice versa.] +includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-context') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-expressions-guidelines') :marked Dependent values should not change during a single turn of the event loop. If an idempotent expression returns a string or a number, it returns the same string or number when called twice in a row. If the expression returns an object (including a `DateTime`, `Map`, or `List`), it returns the same object *reference* when called twice in a row. .callout.is-helpful header Dart difference: Arrays are lists :marked Arrays in JavaScript correspond to lists in Dart (instances of the `List` class). This chapter uses _array_ and _list_ interchangeably. For more information, see [Lists](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#lists) in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html). +includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-statements-1') :marked Like template expressions, template *statements* use a language that looks like Dart. The template statement parser is different than the template expression parser and specifically supports both basic assignment (`=`) and chaining expressions with semicolons (`;`) and commas (`,`). **[QUESTION: is that true — would `,` really work? is "chaining" really the word we want to use?]** However, certain Dart syntax is not allowed: * the `new` and `const` keywords **[QUESTION: I guessed about `const`. Is it true?]** * increment and decrement operators, `++` and `--` * operator assignment, such as `+=` and `-=` * the bitwise operators `|` and `&` * the [template expression operators](#expression-operators) **[QUESTION: can you really not use `?.`?]** .callout.is-helpful header Dart difference: Template statement operators :marked [PENDING: say something about stuff you might find in a24ts statements but not in dart statements, and vice versa.] +includeShared('../../../ts/latest/guide/template-syntax.jade', 'template-statements-3') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-1') +makeExample('template-syntax/dart/lib/app_component.html', 'img+button')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-2') +makeExample('template-syntax/dart/lib/app_component.html', 'hero-detail-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-3') +makeExample('template-syntax/dart/lib/app_component.html', 'disabled-button-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-4') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-attribute-vs-property') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-5') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-world-without-attributes') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-targets')
table tr th Binding type th Target th Examples tr td Property td. Element property
Component property
Directive property td +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-syntax-1')(format=".") tr td Event td. Element event
Component event
Directive event td +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-syntax-1')(format=".") tr td Two-way td. Event and property td +makeExample('template-syntax/dart/lib/app_component.html', '2-way-binding-syntax-1')(format=".") tr td Attribute td. Attribute (the exception) td +makeExample('template-syntax/dart/lib/app_component.html', 'attribute-binding-syntax-1')(format=".") tr td Class td. class property td +makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-syntax-1')(format=".") tr td Style td. style property td +makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-syntax-1')(format=".")
+includeShared('../../../ts/latest/guide/template-syntax.jade', 'binding-syntax-end') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-1') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-2') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-3') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-4') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-5') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-6') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-7') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-8') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-5')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-9') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-10') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-4')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-11') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-6')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-12') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-7')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-13') +makeExample('template-syntax/dart/lib/app_component.html', 'property-binding-vs-interpolation')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'property-binding-14') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-1') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-2') +makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-colspan')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-3') +makeExample('template-syntax/dart/lib/app_component.html', 'attrib-binding-aria')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-1') +makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-2') +makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-2')(format=".") // +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-3') :marked Finally, we can bind to a specific class name. Angular adds the class when the template expression evaluates to `true`. It removes the class when the expression evaluates to `false`. +makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-class-4') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-1') +makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-2') +makeExample('template-syntax/dart/lib/app_component.html', 'style-binding-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'other-bindings-style-3') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-1') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-2') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-3') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-4') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-5') +makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-6') +makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'template-1', 'HeroDetailComponent.ts (template)')(format=".") +makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'deleteRequest', 'HeroDetailComponent.ts (delete logic)')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-7') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-to-component')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'event-binding-8') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-1') +makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-2') +makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-3') +makeExample('template-syntax/dart/lib/app_component.html', 'without-NgModel')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-4') +makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-5') +makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-6') +makeExample('template-syntax/dart/lib/app_component.html', 'NgModel-4')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'ngModel-7') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-1') +makeExample('template-syntax/dart/lib/app_component.html', 'event-binding-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-2') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-1') +makeExample('template-syntax/dart/lib/app_component.html', 'class-binding-3a')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-2') +makeExample('template-syntax/dart/lib/app_component.dart', 'setClasses')(format=".") // PENDING: Add "Dart difference" for returning maps in Dart? for omitting unnecessary `this.`s? +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngClass-3') +makeExample('template-syntax/dart/lib/app_component.html', 'NgClass-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-1') +makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-2') +makeExample('template-syntax/dart/lib/app_component.dart', 'setStyles')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngStyle-3') +makeExample('template-syntax/dart/lib/app_component.html', 'NgStyle-2')(format=".") // +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-1') .l-main-section :marked ### NgIf We can add an element subtree (an element and its children) to the DOM by binding an `NgIf` directive to a `true` expression. +makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-2') // +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-3') :marked Binding to a false expression removes the element subtree from the DOM. +makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-2')(format=".") .callout.is-helpful header Dart difference: No truthy values :marked In checked mode, Dart expects Boolean values (those with type `bool`) to be either `true` or `false`. Even in production mode, the only value Dart treats as `true` is the value `true`; all other values are `false`. TypeScript and JavaScript, on the other hand, treat many values (including non-null objects) as true. A TypeScript Angular 2 program, for example, often has code like `*ngIf="currentHero"` where a Dart program has code like `*ngIf="currentHero != null"`. When converting TypeScript code to Dart code, watch out for true/false problems. For example, forgetting the `!= null` can lead to error messages such as "[TODO: Put error message here]". For more information, see [Booleans](https://www.dartlang.org/docs/dart-up-and-running/ch02.html#booleans) in the [Dart language tour](https://www.dartlang.org/docs/dart-up-and-running/ch02.html). +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-4') +makeExample('template-syntax/dart/lib/app_component.html', 'NgIf-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngIf-5') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngSwitch-1') +makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngSwitch-2') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-1') +makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-2') +makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-3') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-4') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-5') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-6') +makeExample('template-syntax/dart/lib/app_component.html', 'NgFor-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngFor-7') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-1') +makeExample('template-syntax/dart/lib/app_component.dart', 'trackByHeroes')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-2') +makeExample('template-syntax/dart/lib/app_component.html', 'NgForTrackBy-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'directives-ngForTrackBy-3') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-1') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-2a') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-2a')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-2') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngIf-3') // Changed from RED to ORANGE, since this isn't so dire a situation in Dart. .callout.is-important header Remember the brackets! :marked Don’t make the mistake of writing `ngIf="currentHero"`! That syntax assigns the *string* value "currentHero" to `ngIf`, which won't work because `ngIf` expects a bool. **[QUESTION: Did I get that right?]** +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngSwitch-1') +makeExample('template-syntax/dart/lib/app_component.html', 'NgSwitch-expanded') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngSwitch-2') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-1') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-3a')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-2') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-3')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-3') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'star-template-ngFor-4') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-1') +makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-2') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-refs') +makeExample('template-syntax/dart/lib/app_component.html', 'var-phone')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-value') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-1') +makeExample('template-syntax/dart/lib/app_component.html', 'var-form')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-2') +makeExample('template-syntax/dart/lib/app_component.html', 'var-form-a')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'local-vars-form-3') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-1') +makeExample('template-syntax/dart/lib/app_component.html', 'io-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-2') +makeExample('template-syntax/dart/lib/app_component.html', 'io-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-3') +makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-1')(format=".") :marked .l-sub-section :marked Alternatively, we can identify members in the `inputs` and `outputs` arrays of the directive metadata, as in this example: +makeExample('template-syntax/dart/lib/hero_detail_component.dart', 'input-output-2')(format=".")
:marked We can specify an input/output property either with a decorator or in a metadata array. Don't do both! +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-4') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-5') +makeExample('template-syntax/dart/lib/app_component.html', 'my-click')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'inputs-outputs-6') +makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-1')(format=".") .l-sub-section :marked We can also alias property names in the `inputs` and `outputs` arrays. We write a colon-delimited (`:`) string with the directive property name on the *left* and the public alias on the *right*: +makeExample('template-syntax/dart/lib/my_click_directive.dart', 'my-click-output-2')(format=".") .l-main-section :marked ## Template expression operators The template expression language employs a subset of Dart syntax supplemented with a few special operators for specific scenarios. We'll cover two of these operators: _pipe_ and _Elvis_. .callout.is-helpful header Dart difference: ?. is a Dart operator :marked The Elvis operator (`?.`) is part of the Dart language. It's considered a template expression operator because Angular 2 supports `?.` even in TypeScript and JavaScript apps. +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-1') +makeExample('template-syntax/dart/lib/app_component.html', 'pipes-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-2') +makeExample('template-syntax/dart/lib/app_component.html', 'pipes-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-3') +makeExample('template-syntax/dart/lib/app_component.html', 'pipes-3')(format=".") // NOTE: Intentionally omit discussion of the json pipe. +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-pipe-4') +makeExample('template-syntax/dart/lib/app_component.html', 'pipes-json')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-1') +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-2')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-2') +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-1')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-3') // +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-4') :marked Dart throws an exception, and so does Angular: code-example(format="" language="html"). EXCEPTION: The null object does not have a getter 'firstName'. +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-5') +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-4')(format=".") // NOTE: Intentionally skip ugly null checking you wouldn't do in Dart. +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-6') +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-5')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-7') :marked This approach has merit but can be cumbersome, especially if the property path is long. Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`. +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-8') +makeExample('template-syntax/dart/lib/app_component.html', 'elvis-6')(format=".") +includeShared('../../../ts/latest/guide/template-syntax.jade', 'expression-operators-elvis-9') +includeShared('../../../ts/latest/guide/template-syntax.jade', 'summary')