CODEWITHSUNDEEP
angular
user3447602
user3447602

Reputation: 73

ngTemplateOutlet string comparison template parse error

I have an angular 4 template as below. I am trying to do the string comparison on [ngTemplateOutlet]='{{name}}!=xyz'... as below but getting template parse errors:Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it. Can anybody help, please ?

(Code referred from :https://stackblitz.com/edit/angular-ng-container-conditional?file=app%2Fapp.component.html )

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<div>
  <h3>All Templates</h3>
  <ul *ngFor="let number of numbers">
    <ng-container [ngTemplateOutlet]='{{name}}!=xyz' ? even_tpl : odd_tpl' [ngTemplateOutletContext]="{number:number}"></ng-container>
  </ul>
  </div>

<ng-template #odd_tpl let-number='number'>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl let-number='number'>
  <li>Even: {{number}}</li>  
</ng-template>

Upvotes: 1

Views: 1007

Answers (1)

match
match

Reputation: 11060

Using {{ }} is for interpolation in places where the html is 'static' - e.g:

<foo title="Hello {{name}}"></foo>

This is short-hand for:

 <foo [title]="'Hello ' + name">   </foo>

Since you are doing property binding with [ ], the entire contents of the right-hand side will be evaluated as an expression, so doesn't need interpolation:

`[ngTemplateOutlet]="name!='xyz' ? even_tpl : odd_tpl"`

Have a look at the template syntax section of the Angular Cheatsheet to familiarise yourself with the different approaches.

Upvotes: 0

Related Questions