Escape curly braces in condition Angular

Question

I have this case in which I want to check against a string that contains curly braces. Data retrieved from object contains a string with curly braces.

             let defaultTitleFromComponentVar = 'Hello There';
             let dataList = ['Test1', 'Title2', '{{defaultTitle}}', 'Title3'];

             <ul>
                <li *ngFor="let title of dataList">
                  <ng-container *ngIf="title == '{{defaultTitle}}'">
                    {{ defaultTitleFromComponentVar }}
                  </ng-container>
                  <ng-container *ngIf="title != '{{defaultTitle}}'">
                    {{ title }}
                  </ng-container>  
                </li>
              </ul>

Error get in console:

Uncaught Error: Template parse errors: Can't bind to '*ngIf' since it 
isn't a known property of...

And does this **not** work? What's the output? Give a [mcve]. — jonrsharpe, Jul 23 '19 at 09:36
[See this answer](https://stackoverflow.com/questions/16868024/how-do-i-escape-curly-braces-for-display-on-page-when-using-angularjs/37473892#37473892) — Yaelet, Jul 23 '19 at 09:37
https://stackoverflow.com/search?q=%5Bangular%5D+escape+curly+braces — Harun Yilmaz, Jul 23 '19 at 09:40
no any output it gives error in console: Uncaught Error: Template parse errors: Can't bind to '*ngIf' since it isn't a known property of... — Uttam Panara, Jul 23 '19 at 09:53
That *is* the output - your examples should include the errors you're getting. It's unclear from the question why you think there's a problem at all. — jonrsharpe, Jul 23 '19 at 11:22

score 1 · Answer 1 · answered Jul 23 '19 at 10:17

1

You need to escape every curly brace using \

*ngIf="title == '\{\{defaultTitle\}\}'

answered Jul 23 '19 at 10:17

Luis Rico

625
6
22

Andrey · Accepted Answer · 2019-07-23T09:48:58.253

0

maybe simply

*ngIf="title == '{{custTitle}\}'"

edited Jul 23 '19 at 09:48

answered Jul 23 '19 at 09:37

Andrey

1,752
18
17

I want to check string that have curly braces. – Uttam Panara Jul 23 '19 at 09:45
1

try my modified answer then – Andrey Jul 23 '19 at 09:49

Escape curly braces in condition Angular

2 Answers2