Still trying to grasp Angular. How can I use the *ngIf directive to only display to following div when a certain string is present. To be more specific, I want the div to show when the phrase 'Que' is present in the 'reason' database column which is part of the database table TutorRequests.

I have tried to use the indexOf() method but I am assuming it is not correctly implemented.

<div class="col-sm-3">
 <div class="panel panel-default pre-scrollable pre-scrollable-3">
   <div class ="row">
     <h2>Tutor Request</h2>
       <div *ngIf="tutorRequests.reason.indexOf('Que')">
         <div *ngFor="let tutorRequest of tutorRequests;" style="margin 
                 bottom: 10px;">
          <h5>{{tutorRequest.tutor.firstName + " " + 
             tutorRequest.tutor.lastName}}</h5>
                <p>{{tutorRequest.request.reason}}</p>
           <button style="margin-top: 1px;" class="btn btn-warning btn-sm"                       
             (click)="rejectTutorRequest(tutorRequest.tutor.userID)">Unflag
           </button>
          </div>
         </div>
        </div>
          <div *ngIf="!tutorRequests|| tutorRequests.length == 0">Tutor 
                    Requests to show</div>
          </div>
        </div>
       </div>

I am sure this is a simple fix, but again I am new to angular.

Still trying to grasp Angular. How can I use the *ngIf directive to only display to following div when a certain string is present. To be more specific, I want the div to show when the phrase 'Que' is present in the 'reason' database column which is part of the database table TutorRequests.

I have tried to use the indexOf() method but I am assuming it is not correctly implemented.

<div class="col-sm-3">
 <div class="panel panel-default pre-scrollable pre-scrollable-3">
   <div class ="row">
     <h2>Tutor Request</h2>
       <div *ngIf="tutorRequests.reason.indexOf('Que')">
         <div *ngFor="let tutorRequest of tutorRequests;" style="margin 
                 bottom: 10px;">
          <h5>{{tutorRequest.tutor.firstName + " " + 
             tutorRequest.tutor.lastName}}</h5>
                <p>{{tutorRequest.request.reason}}</p>
           <button style="margin-top: 1px;" class="btn btn-warning btn-sm"                       
             (click)="rejectTutorRequest(tutorRequest.tutor.userID)">Unflag
           </button>
          </div>
         </div>
        </div>
          <div *ngIf="!tutorRequests|| tutorRequests.length == 0">Tutor 
                    Requests to show</div>
          </div>
        </div>
       </div>

I am sure this is a simple fix, but again I am new to angular.

• javascript
• angular
• typescript
• angular-ng-if

• indexOf return -1 if not exists, but 0 if "Que" is at the start of reason – Eliseo Commented Aug 1, 2019 at 16:46

3 Answers 3

You can use the includes method to check if a string contains a substring.

<div *ngIf="tutorRequests.reason.includes('Que')">

• ES2016 Specifications included the includes() method for Array data structure.
• The includes() method check if an array includes a certain element, returning true or false as appropriate.
• The includes method finds NaN and undefined whereas the indexOf method doesn't.

So thats why you can use following code

*ngIf="tutorRequests.reason.includes('Que')"

Since > is a special HTML character, you need to use an HTML entity.

<div *ngIf="tutorRequests.reason.indexOf('Que') &gt;= 0">

Of course, if you only need to know if the string starts with "Que", then this will do:

<div *ngIf="tutorRequests.reason.indexOf('Que') === 0">