CODEWITHSUNDEEP
angulardebuggingkendo-grid
Nick Blexrud
Nick Blexrud

Reputation: 9603

Angular2 Template parse error after error code removed

I'm working with ng2 and kendo-ui grid component. I've had no issues until I went to add another property to kendo grid component, and now I seem to be stuck in some strange compiler fugue state.

Error in Chrome Dev console:

Unexpected character "a" ("
    </kendo-grid-column>
  </kendo-grid
    [ERROR ->]appRowClick
    [ngStyle]="{
      'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc("): ng:///FooBarModule/FooBarComponent.html@214:4
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
      'width': 'calc(100vw - 130px)'}">

</div>
[ERROR ->]"): ng:///FooBarModule/FooBarComponent.html@220:0
Invalid ICU message. Missing '}'. ("
      'width': 'calc(100vw - 130px)'}">

</div>
[ERROR ->]"): ng:///FooBarModule/FooBarComponent.html@220:0
    at syntaxError (compiler.es5.js:1690)
    at DirectiveNormalizer.normalizeLoadedTemplate (compiler.es5.js:14132)
    at compiler.es5.js:14118
    at Object.then (compiler.es5.js:1679)
    at DirectiveNormalizer.normalizeTemplateOnly (compiler.es5.js:14118)
    at DirectiveNormalizer.normalizeTemplate (compiler.es5.js:14100)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.es5.js:15129)
    at compiler.es5.js:26806
    at Array.forEach (<anonymous>)
    at compiler.es5.js:26805

foo.bar.html (with ngStyle): 

  <kendo-grid
    appRowClick
    [ngStyle]="{
       'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)',
       'width': 'calc(100vw - 130px)'}"
    [data]="gridData"
    [selectable]="true"
    [sortable]="true"
    (selectionChange)="selectionChange($event)"
    (dataStateChange)="dataStateChange($event)">...</kendo-grid>

So I remove the entire [ngStyle] input expect that would resolve the issue, however I'm still receiving the error. The code doesn't exist anywhere else in the app.

Does anybody know what could be the issue? I've tried restarting ng serve and refreshing browser, but neither seem to work.

foo.bar.html (without ngStyle):

  <kendo-grid
    appRowClick
    [data]="gridData"
    [selectable]="true"
    [sortable]="true"
    (selectionChange)="selectionChange($event)"
    (dataStateChange)="dataStateChange($event)">...</kendo-grid>

Upvotes: 1

Views: 539

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

You can't have newlines inside binding expressions

[ngStyle]="{
   'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)',
   'width': 'calc(100vw - 130px)'}"

should be

[ngStyle]="{ 'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)', 'width': 'calc(100vw - 130px)'}"

Upvotes: 2

Related Questions