Angular - subscribe callback not called when html tags put inside ngIf

[Curtis Newton]

Hello,

I use pipes for translations, and when I put these "piped" tags inside an ngIf div, the translation does not show up

details : the pies do a subscribe to a service observable
when the service gets its json it puts "true" in its stream wich is supposed to triggers all pipes who subsribed to that observable

works pretty neat for all my application so far, but inside an ngif, it does not work

service: //------------------------------------------------------------------------------------------------------------------------------------------

@Injectable()
export class TranslateService
{
    private trads={};
    private language="en";

      public translationLoaded : Observable<boolean>;

      private translationLoadedObserver : Observer<boolean>;

    constructor(private http:Http,private cookieService:CookieService )
    {
        this.getLanguage();

        this.translationLoaded = Observable.create((observer :Observer<boolean>)=>     pipes will subscribe to this observable and get trigered below with .next(true)
        {
              this.translationLoadedObserver = observer;
              this.getJson();
        }).share();
    }

    getJson()
    {
        this.http.get("app/translations/"+this.language+".json")
            .map(res => res.json())
            .subscribe(
                res =>
                {
                    this.trads = res;
                    this.translationLoadedObserver.next(true); //add true to the observable
                },
                error =>
                {
                    console.log(error);
                },
            );
    }

    getTranslation = function(text:string) : string
    {
        console.log("getTranslation("+text+") => "+this.trads[text]);
        if(this.trads[text])
            return this.trads[text];
        else
            return "<<<"+text+">>>"
    };

    getLanguage()
    {
            this.language=this.cookieService.get("edenred_catalog_language");
        return this.language;
    }

    setLanguage(language:string)
    {
        this.language=language;
        this.cookieService.put("edenred_catalog_language",language);
        this.getJson();
    }
}

pipe : //------------------------------------------------------------------------------------------------------------------------------------------

import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs/Subscription";
import { Observer } from "rxjs/Observer";
import 'rxjs/add/operator/map'

import { TranslateService } from './translate.service'

@Pipe({
    name: 'translate',
    pure: false // data needs to be updated when translations are received
})
export class TranslatePipe implements PipeTransform
{
    loaded = false;
    translationLoadedSub:Subscription ;
    value="";

   
    constructor(private ref :ChangeDetectorRef,private translateService:TranslateService)
    {
       
    }

      transform(text: string, args: string[]): string
      {
          if(!this.translationLoadedSub)
        {
              this.translationLoadedSub = this.translateService.translationLoaded.subscribe(
                  (data) => {
                              this.value = this.translateService.getTranslation(text);  <<<<<<<<<<<<<<<<<<<< tshi is not executed when the pipe is on a tag inside the ngIF
                              this.ref.markForCheck();
                              this.loaded = true;
                             });
        }
       
        if (this.loaded) { // needed ?
          this.value = this.translateService.getTranslation(text);
        }

        return this.value;
      }

      _dispose(): void
      {
        //if(isPresent(this.translationLoadedSub))
        {
            this.translationLoadedSub.unsubscribe();
              this.translationLoadedSub = undefined;
        }
      }

  ngOnDestroy(): void {
    this._dispose();
  }
}

component template: //------------------------------------------------------------------------------------------------------------------------------------------

<div class="pageTitleWrapper">
    <h1>{{ "productTitle" | translate }}</h1>
</div>

<div *ngIf="product">


<div>
          <label>{{ "productNameFR" | translate }}</label>
          <input class="product-NamePlaceholder" [(ngModel)]="product.nameFR"/>

          <label>{{ "productDescriptionFR" | translate }}</label>
          <textarea [(ngModel)]="product.descriptionFR" ></textarea>

          <label>{{ "productNameNL" | translate }}</label>
          <input class="product-NamePlaceholder" [(ngModel)]="product.nameNL"/>

          <label>{{ "productDescriptionNL" | translate }}</label>
          <textarea [(ngModel)]="product.descriptionNL" ></textarea>
  </div>


  <div>
    <label>id: </label>{{ product.id }}
  </div>

</div>

thanks