Using *ngIf={{object.field}} is causing Cannot read property 'toUpperCase' of undefined

I got a mat-list and mat-list-item working and need to hide and show based on the value of different boolean types. In my data collection, I added a field to specified the name of the boolean for the *ngIf. When I render the UI, F12 shows me the following error

Uncaught Error: Template parse errors:

TypeError: Cannot read property 'toUpperCase' of undefined ("                   

                                    <div [ERROR ->]*ngIf={{metricTotal.clause}}>
                                    <div class="ng-container" *ngIf={{"): ng:///AppModule/SalesComponent.html@226:41
Can't bind to '*ngIf' since it isn't a known property of 'div'. ("

I can't use ngIf directly to the name of each actual boolean.

You should not use interpolation {{}} with *ngIf , remove the curly braces,

 <div *ngIf=metricTotal.clause>

Using *ngIf={{object.field}} is causing Cannot read - html, parse errors: TypeError: Cannot read property 'toUpperCase' of undefined (" < div [ERROR ->]*ngIf={{metricTotal.clause}}> <div class="ng-container" *ngIf={{"): �

Do not use {{}} for *ngIf condition. It should be like:

<div *ngIf="condition">Content to render when condition is true.</div>

you can use it directly:

<div *ngIf="metricTotal.clause">

If it's in a *ngFor then try to use a function in the component to return value:

Ex:

<div *ngIf="isDisplayed(metricTotal.clause)">

in your component, you can build your logic to return true or false based on clause:

isDisplayed(clauseValue): boolean {
// your logic to decide the display condition

return true; // or false as needed

}

Angular 5 ERROR TypeError: Cannot read property 'toLowerCase , Using *ngIf={{object.field}} is causing Cannot read property 'toUpperCase' of undefined. I got a mat-list and mat-list-item working and need to hide and show�

Not sure if this is the best approach, but I removed the interpolation which threw me off.

In the angular, I changed to *ngIf="getDataTypeName(item)"

In my ts code

getDataTypeName(clickItem: string) {
  if (clickItem == 'dataset1') {
  return true; }
  else if ...
}

Angular Material Table Error - Cannot read property 'find' of , Angular Material Table Error - Cannot read property 'find' of undefined . I suspect that something was changed for AM 6 and is causing a bug <div class ="mat-elevation-z2 usersContainer" *ngIf="datasource firstName }} {{ element. at Object. A var isn't being populated with data so it is undefined.

48 answers on StackOverflow to the most popular Angular questions , Importing lodash into angular2 + typescript application; How to detect a route Can't bind to 'ngModel' since it isn't a known property of 'input' If I simply use the binding syntax {{myVal}} it encodes all HTML Binding select element to object in Angular *ngIf and *ngFor on same element causing error.

change img src html javascript Code Example, change src javascript � image tag array javascript change src � javascript set src of img javascript Use HTML DOM to change the value of the image src attribute style={{ margin: '0 auto', maxWidth: 800 }} /> � <table id='userTable'> Can't bind to 'ngModel' since it isn't a known property of 'input' � Can't�

How to Safely Access Attributes in Angular Using “?.”, In this post, we will see how we can safely access object's properties in This tells Angular to substitute {{prop}} with the value of prop in the ERROR TypeError: Cannot read property 'api' of undefined We could use *ngIf directive to solve this issue. brackets is true, and null values are false in JS.