Angular 4 "Property does not exist on type component"

Question

This last week I've started learning Angular 4 and TypeScript, and I've hit my first roadblock.

I'm trying to make a simple date and time component. From a Javascript view I can't see anything wrong, but I think I'm not working with scope the way Angular wants, so I'm looking for some guidance. The error is: Failed to compile very/long/file/path/date-time.component.ts (35,18): Property 'date' does not exist on type 'DateTimeComponent'.

I suspect I'm not putting my methods in the right place, or I need to declare my properties outside of setTime(). Any advice much appreciated.

date-time.component.ts:

export class DateTimeComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {
    this.setTime();
  }

  checkTime(i) {
    return (i < 10) ? "0" + i : i;
  }

  setTime() {

    let month = ["January", "February", 
    "March", "April", 
    "May", "June", 
    "July", "August", 
    "September", "October", 
    "November", "December"];

    //date
    let date: Date = new Date(); // this only accessible within setTime() method
    let d: any = date.getDate();
    let m: any = date.getMonth();
    let y: any = date.getFullYear();
    //time
    let h: any = date.getHours();
    let min: any = date.getMinutes();
    let s: any = date.getSeconds();

    let newMin: any = this.checkTime(this.min);
    let newS: any = this.checkTime(this.s);

    let myDate: any = d + " " + month[this.m] + " " + y;
    let myTime: any = h + ":" + newMin + ":" + newS; 

    let t: any = setTimeout(() => {
      startTime()
    }, 500);

  }

} //end of class

date-time.component.html:

<div ng-controller='TimeCtrl'>
  <p>{{ myDate }}</p>
  <p>{{ myTime }}</p>
</div>

Answer 1

Here's a plunker showing your thing working in an Angular environment. This isn't a good way to accomplish what you're trying to do.

Instead, you should do something like this better plunker that I made that actually uses Angular to its full potential.

My version of your code is like 99% shorter, and accomplishes the goal.

myDate: Date;

ngOnInit() {
  this.myDate = new Date();
}

With the HTML

<p>{{ myDate | date:'d MMMM y'}}</p>
<p>{{ myDate | date:'hh:mm:ss'}}</p>

Answer 2

The reason you have not declared the variable date on your component.

export class DateTimeComponent implements OnInit {

  constructor() { 

  }
  
  private date: Date; // This is accessible to this entire file
  private month: string[];
  private d: any;
  private m: any;
  private y: any;
  private h: any;
  private min: any;
  private s: any;
  private newMin: any;
  private newS: any;
  private myDate: any;
  private myTime: any;
  private t: any;
  
  ngOnInit() {

  }
  
  checkTime(i) {
      return (i < 10) ? "0" + i : i;
    }

    setTime() {
      this.month = ["January", "February", 
      "March", "April", 
      "May", "June", 
      "July", "August", 
      "September", "October", 
      "November", "December"];

      //date
      this.date = new Date();
      this.d = this.date.getDate();
      this.m = this.date.getMonth();
      this.y = this.date.getFullYear();
      //time
      this.h = this.date.getHours();
      this.min = this.date.getMinutes();
      this.s = this.date.getSeconds();

      this.newMin = this.checkTime(this.min);
      this.newS = this.checkTime(this.s);

      this.myDate = this.d + " " + this.month[this.m] + " " + this.y;
      this.myTime = this.h + ":" + this.newMin + ":" + this.newS; 

      this.t = setTimeout(() => {
        startTime()
      }, 500);
    }


} //end of class

export class DateTimeComponent implements OnInit {

  constructor() { 

  }
 
  ngOnInit() {
  }
  
  checkTime(i) {
      return (i < 10) ? "0" + i : i;
    }

    setTime() {
     let month = ["January", "February", 
      "March", "April", 
      "May", "June", 
      "July", "August", 
      "September", "October", 
      "November", "December"];

      //date
      let date: Date = new Date(); // this only accessible within setTime() method
      let d: any = date.getDate();
      let m: any = date.getMonth();
      let y: any = date.getFullYear();
      //time
      let h: any = date.getHours();
      let min: any = date.getMinutes();
      let s: any = date.getSeconds();

      let newMin: any = this.checkTime(this.min);
      let newS: any = this.checkTime(this.s);

      let myDate: any = d + " " + month[this.m] + " " + y;
      let myTime: any = h + ":" + newMin + ":" + newS; 

      let t: any = setTimeout(() => {
        startTime()
      }, 500);
    }

} //end of class

There two approaches to this, snippet 1 show file wide declaration, this what you would mostly use in your app. The Snippet 2 show method based declaration and its only accessible to that method, as far as files concerns, that variable doesn't exist.

private

If you stick private in front of a variable or method, that will only be accessible to the .ts file (itself), not even the HTML has access to that.