Lesson Tuesday

In the last lesson, we covered a component's class annotation in more depth. In this lesson, we'll explore how we can use variables in the class declaration of a component. This will be the first of many lessons where we'll be working with the class declaration; after all, this is where the bulk of our code will go!

Before we start adding variables, let's take a look at app.component.html again:

app/app.component.html
<h1>To Do List</h1>
<h3>Epicodus Angular Homework</h3>

It makes sense that our header is hard-coded but we probably don't want Epicodus Angular Homework to be hard-coded, too. After all, this is a to-do list and the things we need to get done will change over time. The next step is to store this in a variable and then display the variable in our template.

app/app.component.ts
...
export class AppComponent {
  currentFocus: string = 'Angular Homework';
}
...

First we modify the code inside our class declaration and define a variable called currentFocus. We declare that it will hold a string and set it to 'Angular Homework'. Now we can display this variable in app.component.html with a double pair of curly brackets:

app/app.component.html
<h1>To Do List</h1>
<h3>{{currentFocus}}</h3>

We use the double curly bracket tags to let Angular know they contain a known property on the component that can be found in that component's class declaration file.

If we need to change the currentFocus, we can do so in the class declaration of app.component.ts.

Variables Referencing Other Variables

It may seem counterproductive to do this for such a small piece of information, but you'll see the value of dynamically displaying data like this as our applications grow in size. Let's take this a step further and add the current date. We'll add variables to our template where we'd like to display month, day, and year values:

app/app.component.html
<h1>To Do List for {{month}}/{{day}}/{{year}}</h1>
<h3>{{currentFocus}}</h3>

We'll define these values in the component's class declaration by creating a new JavaScript Date object and retrieving the month, date, and year information from it using built-in JavaScript methods:

app/app.component.ts
...
export class AppComponent {
  currentFocus: string = 'Angular Homework';
  currentTime = new Date();
  month: number = currentTime.getMonth() + 1;
  day: number = currentTime.getDate();
  year: number = currentTime.getFullYear();
}

When we refresh the browser, though, this code won't work. If you open the console, you'll see an error: ReferenceError: currentTime is not defined.

The issue here is that we need to use the this keyword to reference variables that have already been declared. This actually makes sense because currentFocus and currentTime are properties of the class and we access properties inside of a class by using this.

Let's modify our code:

app/app.component.ts
...
  month: number = this.currentTime.getMonth() + 1;
  day: number = this.currentTime.getDate();
  year: number = this.currentTime.getFullYear();
...

Now it works!

angular-to-do-date-successfully-displayed

In Angular, when a variable in a component's class declaration references another variable in the class, it must be prefaced with the this keyword.

Dot Notation in Component Templates

Let's create a firstTask to go with our currentFocus. For now, we can package this in an object literal like this:

app/app.component.ts
...

export class AppComponent {
  ...
  firstTask = {
    description: "Finish weekend Angular homework for Epicodus course"
  }
}

We can use dot notation to access the firstTask properties directly in the template:

app/app.component.html
<h1>To Do List for {{month}}/{{day}}/{{year}}</h1>
<h3>{{currentFocus}}</h3>
<ul>
 <li>{{firstTask.description}}</li>
</ul>

If we look in the browser, we'll see our new firstTask.

first-task-with-dot-notation

Now that we understand how to display information in our templates (also commonly known as a view), we'll begin to create more complex information to show users. In the next lesson, we'll implement a Task model into our To Do List application.