Getting error with ngIf in Angular

Question

I'm using angular and I want to display data from a variable which is in json form .I'm able to do it for *ngfor but also I want to put a condition where it checks whether msg.who=="Bot".I'm doing that using :

<div class="UserWrapper" *ngFor="let msg of msgs" ngIf="msg.who == 'User ">
    <div class=""></div>
        <div class = "speech-bubble1 z-depth-5"><p>{{msg.msg}}</p>
            <p class="timeRight">{{msg.time}}</p>
    </div>
 </div>

I don't know how to use ng if another way but on doing this i'm getting the following error.

ERROR Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: 
StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: 
NullInjectorError: No provider for TemplateRef!

How can I check for the given condition

Answer 1

You cannot use ngFor and ngIf on the same element, so replace it with ng-container, also few mistakes such as *ngIf instead of ngIf and you should use === when you are checking for the type as well

change your code as follows,

<ng-container *ngFor="let msg of msgs">
  <div *ngIf="msg.who === User"  class=""> 
        <div class = "speech-bubble1 z-depth-5"><p>{{msg.msg}}</p>
        <p class="timeRight">{{msg.time}}</p>
  </div>
</ng-container>