e2e Angular 2 with protractor, element(by.id('count')).getText() showing null

Question

My test run is getting failed by showing the message - Expected '' to equal 101 . What may be the issue with this code,In the UI I am getting proper result .The div with the id SequenceMasterCount is hidden while loading the page, after the click on the search button the div starts showing with the content of the api result.

import { CleanUiPage } from './app.po';
import { browser, element, by } from 'protractor';    
describe('clean-ui App', () => {
  let page: CleanUiPage;

  beforeEach(() => {
    page = new CleanUiPage();
  });    

  it('should allow searching and Show the count', () => {

    const searchButton = element(by.className('list-ro-input'));
    const searchBox = element(by.className('list-RO-search'));
    searchBox.sendKeys('[PIMS]SYSTEM+GAP_FILL_TEST');
    searchButton.click().then(() => {    
      expect(element(by.id('SequenceMasterCount')).getText()).toEqual(101);

    });

  });

Added the HTML from comments by OP

 <section>  
 <input id="list-ro" class="list-ro-input" name="" type="text" #test /> 
 <span class="input-group-btn"> <a href="javascript: void(0);" id='list-ro-search-btn' class="list-RO-search btn btn-default" (click)=onSearch(test)></a> </span> 
  <div [hidden]="this.sequencemasters==0 && this.sequencemasterAlts==0"> 
  <div class="sequenceCount"> 
  <span class="cat__core__step__title">Sequence Master</span> <p id='sequenceMasterCount' class="count-bold">{{this.sequencemasters}}</p> 
 </div> 
 </div> 
 </section>

Answer 1

Your getText() method should be resolving a promise, since getText() returns a promise that needs to be resolved

you need to add this

   searchButton.click().then(() => {    
   element(by.id('SequenceMasterCount'))getText().then(function(text){
       expect(text).toEqual(101);        
        });

});