displaying data on template using angular

Question

I am creating my first component using angular, its a countdown, but i don't know how show results on template

I have tried just using {{}}but nothing happens

thanks for your help ...............................................................................................................................................................................................................................................

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-countdown',
  templateUrl: './countdown.component.html',
  styleUrls: ['./countdown.component.css']
})

export class CountdownComponent implements OnInit {

  mi_funcion () {


    let x = setInterval(function():void{

        let now = new Date().getTime();
        let countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime();

        let distance: number = countDownDate - now
        let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);

        //console.log( `Faltan:  ${days} Dias, ${hours} Horas,  ${minutes} Minutos, ${seconds} Segundos`);

        if (distance < 0){
            clearInterval(x);

            console.log("El tiempo para preventa he terminado");
        }

    },1000);

}    

  ngOnInit() {

  }

}



let instancia = new CountdownComponent();
instancia.mi_funcion()



//And html 

<div class="row">
    <div class="col-3">Dias: {{days}}</div>
    <div class="col-3">Horas: {{hours}}</div>
    <div class="col-3">Minutos: {{minutes}}</div>
    <div class="col-3">SegundoS: {{seconds}}</div>
</div>

Answer 1

Component:

export class CountdownComponent implements OnInit {
  days: number;
  hours: number;
  minutes: number;
  seconds:number;
  constructor() { }

  ngOnInit() {
    this.mi_funcion();
  }

  mi_funcion () {
    setInterval(()=>{
        const now = new Date().getTime();
        const countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime();

        let distance: number = countDownDate - now
        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        //console.log( `Faltan:  ${days} Dias, ${hours} Horas,  ${minutes} Minutos, ${seconds} Segundos`);
    },1000);

}  

}

Template:

<div class="row">
    <div class="col-3">Dias: {{days}}</div>
    <div class="col-3">Horas: {{hours}}</div>
    <div class="col-3">Minutos: {{minutes}}</div>
    <div class="col-3">SegundoS: {{seconds}}</div>
</div>

Template: app.component.html

<app-countdown></app-countdown>

Answer 2

You are missing the properties in your component. The data you have access to on the template is the component properties.

import { Component, OnInit } from '@angular/core';

 @Component({ selector: 'app-countdown', templateUrl: './countdown.component.html', styleUrls: ['./countdown.component.css'] }) 
export class CountdownComponent implements OnInit { 

days: number;
hours: number;
minutes: number;
seconds:number;

mi_funcion () {
// This function is called  every second now! Update the values as needed

let now = new Date().getTime(); let countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime(); 
let distance: number = countDownDate - now 
this.days = Math.floor(distance / (1000 * 60 * 60 * 24)); 
this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 this.seconds = Math.floor((distance % (1000 * 60)) / 1000); 



}

ngOnInit() { 
    setInterval(this.mi_function.bind(this), 1000);
 }

}

Also you don't need to create an object for your component. Angular handles that for you. Also the template looks fine.

Answer 3

Your component should be used in your main HTML as element like this:

<app-countdown></app-countdown>

No need to use your class directly, so remove lines:

let instancia = new CountdownComponent();
instancia.mi_funcion()

And use your initialisation from mi_funcion inside ngOnInit() function.

Answer 4

There are a few things that need to be improved in your code: Make you variables gloabal

days: number;
hours: number;
minutes: number;
seconds:number;
mi_funcion ():void {
   //Tu codigo aqui
   this.hours = ....
   this.days= ....
   this.minutes= ....
   this.segundos= ....
} 

Then you call mi_function() in the ngOnInit() to make sure your function runs.

Finally

In your app.component.html

Put the following code:

<app-countdown></app-countdown>

YOUR FULL WORKING APP https://stackblitz.com/edit/angular-rpeugj

Saludos!