Interpolation declaring using variables

on this page, i will cover how to use variables in angular. angular uses TYPESCRIPT, so we have to code in typescript syntax.

If you havent already, be sure you have started a new project with angular CLI, if you havent, just go to the previous page on this tutorial series.

ok, the first command we are going to use is to add all the files in our directory to our dispository.

$ git add ./

* create and checkout a new branch called 1-angular-veriables
$ git checkout -b 1-angular-veriables

at this point you should have a blank angular project, so when you open http://localhost:4200
you should see a message 'app works!'

open app/app.component.ts
it should looks like this:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

look inside the AppComponent class, this class contains a variable called title, this 'title'  variable has a value of 'app works!' which is the message you see when you first open http://localhost:4200, so where is this variable displayed on the browser??
if you look at @Component decorator, the templateUrl is './app.component.html' so open app.component.html and it should look something like this:

<h1>
  {{title}}
</h1>

this is called interpolation, in angular you can display the value of a variable with the {{}} curly brakets.

DECLARING TYPES:

NOTE: in typescript you cannot reassing a string variable with a number value. example:
myVar = "string";
myVar = 25 // WRONG!!!

now lets add more variables in the AppComponent class, these are the different types of variables you can declare in typescript

myVar:string = "hello"; // String Variable
myVar2:number = 20;    // an interger or number variable
myVar3:boolean = true; // a boolean (true or false)
myVar4:any; // this can be any type of variable, this is useful when you dont know what the value is going to be in the future as the script progresses
myVar4:50; // myVar is now a number
myVar4:'fifty'; // myVar is now a string

myVar5:number[]; // an array

NOTE: declarying the type of variable is not Required but its helpful

another example you can declare variables are in constructors for example:

constructor(private heroService: HeroService) { }