document.getElementById returning null

Question

I am using Ionic2.

I have the following code:

html

<div id="extra-filter-items" class="show">
...
</div>

ts

let extraItemsElement = document.getElementById('extra-filter-items');

But the extraItemsElement is null. I would have expected it to get a handle on the element.

Any idea please?

UPDATE

To provide more detail, because it may be related to the context of the div tag, here is the full html:

<ion-header>
  <ion-navbar id="search-navbar" hideBackButton="false">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-list>
      <ion-row>
        <ion-col>
          <div id="search">
            <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)" (change)="onChangeText($event)"
              (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
              debounce="1"></ion-searchbar>
          </div>
          <!--<div id="pinButton"><button ion-button (click)="presentPopover()" color="primary"><ion-icon name="funnel"></ion-icon></button></div>-->
        </ion-col>
      </ion-row>

      <!--<div *ngIf="showExtraSearch === true">-->
      <div id="extra-filter-items" class="show">
        <ion-row>
          <ion-col>
            <div id="location-filter">
              <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryLocation" (ionClear)="onCancelLocation($event)" (ionInput)="onInputLocation($event)"
                (click)="presentFilterMap()" placeholder="Location" debounce="1"></ion-searchbar>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <div id="categories-filter">
              <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQuerySectors" (ionClear)="onCancelSectors($event)" (ionInput)="onInputSectors($event)"
                (click)="presentFilterCategories()" placeholder="Sectors" debounce="1"></ion-searchbar>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <div id="rating-filter">
              <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryRating" (ionClear)="onCancelRating($event)" (ionInput)="onInputRating($event)"
                (click)="presentFilterRating()" placeholder="Star Rating" debounce="1"></ion-searchbar>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <div id="time-filter">
              <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryTime" (ionClear)="onCancelTime($event)" (ionInput)="onInputTime($event)"
                (click)="presentFilterTime()" placeholder="Last Online" debounce="1"></ion-searchbar>
            </div>
          </ion-col>
        </ion-row>
      </div>
    </ion-list>

  </ion-navbar>
</ion-header>

<ion-content padding class="job-content-wanted" id="search-content">

  <div style="text-align:center">
    <ion-spinner icon="android" *ngIf="jobsLoading"></ion-spinner>
  </div>

  <ion-list>
    <ion-item-sliding #slidingItem *ngFor="let item of jobModels">
      <ion-item class="item-search-wanted" (click)="itemTapped($event, item, true)" (press)="openSlide(slidingItem, item, $event)">
        {{ formatJob(item) }}
        <ion-avatar item-left><img [src]="item.avatar64 ? item.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar>
        <ion-row>
          <ion-col>
            <h2 class="job-tite">{{item.jobTitle}}</h2>
          </ion-col>
          <ion-col>
            <p class="item-selected-row search-category" *ngFor="let subcategory of getSelected(item)"><img class="item-stable filter-image" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" /></p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="small-text-search job-timestamp">{{item.person.lastAccessDate | amCalendar}}</ion-col>
          <ion-col class="small-text-search">{{item.dist}}&nbsp;away</ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <p class="item-selected-row search-rating">
              <rating score="{{item.averageRating}}" max="5"></rating>
            </p>
            <p class="item-selected-row search-rating small-text-search small-text-search-rating">&nbsp;{{item.noReviews}}&nbsp;{{item.noReviews == 1 ? 'review' : 'reviews'}}</p>
          </ion-col>
        </ion-row>
      </ion-item>

      <ion-item-options>
        <button ion-button color="primary" id="messge-id" (click)="messageJob(item)"><ion-icon name="text"></ion-icon>Message</button>
        <button ion-button *ngIf="isFavourite(item)" color="light" (click)="removeFromFavourites(item)"><ion-icon class="ion-ios-heart"></ion-icon>Remove Favourite</button>
        <button ion-button *ngIf="!isFavourite(item)" color="light" (click)="addToFavourites(item)"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

  <ion-infinite-scroll id="infinite-scroll-search" *ngIf="hasMoreData" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content id="infinite-scroll-content-search" *ngIf="hasMoreData"></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>