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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Anton Marinenko · Accepted Answer · 2019-09-07 05:45:06Z

0

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.

answered Sep 7, 2019 at 5:45

Anton Marinenko

3,1401 gold badge12 silver badges17 bronze badges

Comments

Ani Aggarwal · Accepted Answer · 2019-09-07 05:46:32Z

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.

Patricio Vargas · Accepted Answer · 2019-09-07 08:08:47Z

0

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!

edited Sep 7, 2019 at 8:08

answered Sep 7, 2019 at 8:00

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

Collectives™ on Stack Overflow

displaying data on template using angular

4 Answers 4

Component:

Template:

Template: `app.component.html`

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Component:

Template:

Template: app.component.html

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Template: `app.component.html`