Function implementation is missing or not immediately following the declaration. in angular problem with ts

Question

please help me out with the countdown timer

the error which I am getting for now is as follows: Function implementation is missing or not immediately following the declaration.

this is from app.component.html

<div app-landing>

</div>

this is the html code

<div class="container">

    <!-- LEFT SIDE -->


    <div class="split left" id="upComing">
        <h1 id="uce">THE UPCOMING EVENT</h1>
        <table id="tableTimer">
            <tr id="timerValue">
                <td id="days"></td>
                <td id="hrs"></td>
                <td id="mins"></td>
                <td id="secs"></td>

            </tr>
            <tr id="timerSub">
                <td>Days</td>
                <td>Hours</td>
                <td>Minutes</td>
                <td>Seconds</td>

            </tr>
        </table>
    </div>


    <!-- RIGHT SIDE -->


    <div class="split right" id="nextFive">
        <h1 id="nfe">THE NEXT FIVE EVENTS</h1>
        <table>

        </table>
    </div>
</div>


<div class="footer" id="footer"></div>

this is the the ts file. I am totally new to angular and TS , help me solve the issue want to display a countdown timer in side a table . and can't do .

    enter code hereimport { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

  countDown() {
    var today, eventDay, currentTime, eventTime, remainTime, sec, min, hr, days;

    today = new Date();
    eventDay = new Date();

    currentTime = today.getTime();
    eventTime = eventDay.getTime();

    remainTime = eventTime - currentTime;
    sec = Math.floor(remainTime / 1000);
    min = Math.floor(sec / 60);
    hr = Math.floor(min / 60);
    days = Math.floor(hr / 24);

    hr %= 24;
    min %= 60;
    sec %= 60;

    hr = (hr < 10) ? '0' + hr : hr;
    min = (min < 10) ? '0' + min : min;
    sec = (sec < 10) ? '0' + sec : sec;

    document.getElementById('days').innerText = days;
    document.getElementById('days').textContent = days + '' + ':';
    document.getElementById('hrs').textContent = hr + '' + ':';
    document.getElementById('mins').textContent = min + '' + ':';
    document.getElementById('secs').textContent = sec;

    setInterval(this.countDown, 1000);


}

countDown();

Answer 1

1. You are calling countdown() in the body of the component class. This isn't valid javascript. You chould call this.countdown(); from ngOnInit().

ngOnInit(): void {
  this.countdown();
}

ngOnInit is part of the Angular framework, and run by Angular upon the component being loaded if it exists.

2. You are manually manipulating the DOM. This isn't the "Angular way". Instead you update your model (properties on the component), and bind to the model in your HTML to update the DOM.

html

<!-- instead of -->
<td id="days"></td>

<!-- bind read-only values using interpolation -->
<td>{{days}}</td>

ts

days: number;

countdown(): void {
    const today = new Date();
    const eventDay = new Date();

    const currentTime = today.getTime();
    const eventTime = eventDay.getTime();

    const remainTime = eventTime - currentTime;

    let sec = Math.floor(remainTime / 1000);
    let min = Math.floor(sec / 60);
    let hr = Math.floor(min / 60);
    let days = Math.floor(hr / 24);

    hr %= 24;
    min %= 60;
    sec %= 60;

    hr = (hr < 10) ? '0' + hr : hr;
    min = (min < 10) ? '0' + min : min;
    sec = (sec < 10) ? '0' + sec : sec;

    this.days = days;

    // TODO: add and set the other properties

    setInterval(() => this.countDown(), 1000);
}

EDIT

You should follow the official Angular tutorial: https://angular.io/tutorial. It's a great starting point.

Answer 2

simple change your code like this

ts file

  ngOnInit(){
   this.countDown();
  }
  timer={days:'',hr:'',min:'',sec:''}


   countDown() {
    var today, eventDay, currentTime, eventTime, remainTime, sec, min, hr, days;
    window.setInterval(()=>{
    today = new Date();
    eventDay = new Date('2020-02-14');
    currentTime = today.getTime();
    eventTime = eventDay.getTime();

    remainTime = eventTime - currentTime;
    sec = Math.floor(remainTime / 1000);
    min = Math.floor(sec / 60);
    hr = Math.floor(min / 60);
    days = Math.floor(hr / 24);
    hr %= 24;
    min %= 60;
    sec %= 60;
   this.timer={sec,days,min,hr}

 }

in your html like this

<div class="container">

<!-- LEFT SIDE -->


<div class="split left" id="upComing">
    <h1 id="uce">THE UPCOMING EVENT</h1>
    <table id="tableTimer">
        <tr id="timerValue">
            <td id="days">{{timer.days}}</td>
            <td id="hrs">{{timer.hr}}</td>
            <td id="mins">{{timer.min}}</td>
            <td id="secs">{{timer.sec}}</td>

        </tr>
        <tr id="timerSub">
            <td>Days</td>
            <td>Hours</td>
            <td>Minutes</td>
            <td>Seconds</td>

        </tr>
    </table>
</div>


<!-- RIGHT SIDE -->


<div class="split right" id="nextFive">
    <h1 id="nfe">THE NEXT FIVE EVENTS</h1>
    <table>

    </table>
</div>