title: Refresh label countdown in NativeScript and Angular
body: <p>I'm building a timer countdown component, here is the code:</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'time-countdown',
    template: `&lt;StackLayout&gt;
                   &lt;Label text="{{timeRemaining}}" &gt;&lt;/Label&gt;
               &lt;StackLayout&gt;`
  })
  export class TimeCountdownComponent implements OnInit {
      @Input() periodDetails  :any; 
      private timeRemaining     :string = "";
      private units           :string = "";
  
      constructor( private ps: PeriodService) {}
  
      ngOnInit() {
        this.periodDetails.nextPeriodStartDate = this.ps.getNextPeriod(this.periodDetails);
        console.log("TIME COUNTDOWN: init =&gt; " + this.periodDetails.nextPeriodStartDate.toString() )
        setInterval(() =&gt; {
            this.getTimeRemaining()
        }, 1000)
      }           
  
      getTimeRemaining(){
        let trObject = this.ps.getTimeRemaining(this.periodDetails.nextPeriodStartDate);
        this.timeRemaining = trObject.time;
        this.units = (!trObject.units) ? "days": "";
        console.log("TIME COUNTDOWN: Tick =&gt; " + this.timeRemaining )
      }          
    }
  </code></pre>
  
  <p>In the console I get the correct units and time remaining, but in the label is not showing. I tryed to use Observable.timer().subscribe, Observable.interval().subscribe, change the template to "[text]='timeRemaining'", but never shows. </p>
  
  <p>This component is added dynamicaly by the user (related to <a href="https://stackoverflow.com/questions/40887541/refresh-a-listview-adding-new-elements-on-runtime-in-nativescript-and-angular/40888469#40888469">this</a> post ). The thing is, when I click on the "+" button to add a new timer, the time is shown for a little fraction of second and then disapears again. Someone have any idea of what is happening or what I'm doing wrong?</p>
  
  <p>EDIT:
  After lots of research an tryes, if found an intermediate solution.If I use this component as the root component of the app, It works with this code: </p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'time-countdown',
    template: `
              &lt;StackLayout&gt;
                &lt;Label [text]="timeRemaining | async" &gt;&lt;/Label&gt;
              &lt;StackLayout&gt;
              `
  })
  
  export class TimeCountdownComponent implements OnInit {
      @Input() periodDetails: any;
      private timeRemaining: any;
  
      ngOnInit(){
          this.periodDetails.nextPeriodStartDate = this.ps.getNextPeriod(this.periodDetails);
          this.timeRemaining = new Observable&lt;string&gt;((observer: Subscriber&lt;string&gt;) =&gt; {
            setInterval(() =&gt; observer.next(this.getTimeRemaining().time),1000);
          });
      }
  
  
      constructor(private ps: PeriodService ) {}
  
  
      getTimeRemaining() {
          let tr = this.ps.getTimeRemaining(this.periodDetails.nextPeriodStartDate);
          console.log(tr.time);
          return tr;
      }
  }
  </code></pre>
  
  <p>But if I nest it into another component it don't works, the console shows the time remaining but in the template nothing is shown. Someone can make me understand whats happening?</p>