title: Angular 6 timer issue
body: <p>I have a view which polls an endpoint every 30 seconds and updates if there are changes. In the same view I have a div which is shown/hidden every 7 seconds. The timers are started at the same time. </p>
  
  <p>The first few times it runs, it runs perfectly. It's not until the first 30s timer polls again that it basically starts flickering back and forward every 2 seconds - which it shouldn't. </p>
  
  <p>component.ts</p>
  
  <pre><code>  getScreen(tapCode) {
      timer(0, 30000)
        .pipe(mergeMap(() =&gt; this.dataService.get_screen(tapCode)))
        .subscribe(objectResp =&gt; {
          this.callResp = objectResp.status;
          this.polledObj = objectResp.items;
          this.landing = false;
          this.loaded = true;
          this.unavailable = objectResp.items.unavailable;
          localStorage.setItem('ontapCode', tapCode);
          this.getAds(this.polledObj);
        });
    }
  
    getAds(polledObj) {
      this.showAd = false;
      this.adTimer = timer(0, 7000);
      this.adSubscription = this.adTimer.subscribe(() =&gt; {
        if(this.timerCount &gt;= this.polledObj.adverts.length) {
          this.timerCount = 0;
        }
        if(this.timerCount &lt;= this.polledObj.adverts.length) {
          this.adImage = this.polledObj.adverts[this.timerCount].filename;
          this.timerCount++;
        }
        this.showAd = !this.showAd;
      });
    }
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>   &lt;div *ngIf="callResp === 'OK'" class="tap"&gt;
        &lt;div *ngIf="unavailable === '1' || unavailable === 1" class="object-unavailable"&gt;
          &lt;img src="./assets/unavailable.png" class="unavailable-img"&gt;
        &lt;/div&gt;
        &lt;div *ngIf="unavailable === '0' || unavailable === 0"&gt;
          &lt;img src={{polledObj.img}} class="img-object"&gt;
          &lt;div class="container"&gt;
            &lt;div *ngIf="showAd === true"&gt;
              &lt;div class="advertisement"&gt;
                &lt;img src={{adImage}}" class="img-ad"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div *ngIf="showAd === false"&gt;
                &lt;div class="object-detail-container"&gt;
                  &lt;h3 (click)="resetStorage()" class="object-name text-white"&gt;{{polledObj.object_name}}&lt;/h3&gt;
                  &lt;h4 class="text-white object-brewery"&gt;{{polledObj.brewery}}&lt;/h4&gt;
                  &lt;h4 class="text-white object-style"&gt;{{polledObj.style}} - {{polledObj.abv}}%&lt;/h4&gt;
                  &lt;div class="object-sizes" *ngFor="let size of polledObj.sizes"&gt;
                    &lt;span class="object-size-name"&gt;{{size.name}}: &lt;/span&gt;
                    &lt;span class="object-size-volume"&gt; {{size.volume*1000}}ml &lt;/span&gt;
                    &lt;span class="object-size-price"&gt; ${{getPrice(size.price)}} &lt;/span&gt;
                    &lt;span class="object-size-std"&gt; {{getSizeStd(size)}} &lt;/span&gt;
                    &lt;span class="object-size-std-drinks"&gt; std drinks&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>