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

score 9 · Accepted Answer · edited Apr 15 '18 at 02:05

9

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>

edited Apr 15 '18 at 02:05

Zze

18,229
13
85
118

answered Apr 14 '18 at 19:31

Sajeetharan

216,225
63
350
396

But then how do i check for the condition whether the msg.who is but or user – alia Apr 14 '18 at 19:34
@alia In regards to the `===` comment, interestingly, `"1" == 1` will throw a compile error (`Operator '==' cannot be applied to types 'string' and 'number'.`) when in a `.ts` file, however will evaluate as true when used in a template. Therefor you should probably extract type sensitive evaluations into a separate function and reference that instead. @Sajeetharan agree? – Zze Apr 15 '18 at 02:08

Getting error with ngIf in Angular

1 Answers1