Add a Class in Angular

On the previous page you learned about how to add components to your angular using typscript.

Next we are going to learn about classes.
Classes are very easy to use
Classes are like objects in javascript

*continuing with this tutorial, you should have already created a blank project with angular CLI. If not, you can go to the first page of this tutorial.
when you created a new project with CLI, you should have a new git repository.
Lets create a new branch for this tutorial by executing these commands in your project directory:
$ git checkout -b 3-angular-classes


Open file: app.component.ts add the following code to the bottom of the file;
// TypesCript
class Car { 
    engine: string;

    // Use a constructor to receive the string into this class
    constructor(engine: string) {
        this.engine = engine;
    }
}
//you can call the Car class with the following code:
let hondaAccord = new Car('V6'); // hondaAccord is an object now
alert(hondaAccord.engine); // OUTPUT: V6

run your new code with angular CLI:
ng serve

open your browser to: http://localhost:4200 - You will get an alert with the message 'V6' which is the value you sent to the class when you declared hondaAccord

Save your work with git commit

git add ./

git commit

name your commit : 3-angular-classes

Resources:

https://angular.io/docs/ts/latest/api/core/index/Class-function.html

Another Simple Class Explanation

 I found another good tutorial on Typscript Classes. I have struggled with classes because i dont have any experience in java, only javascript. So I found this video on youtube. in the tutorial, this guy called The Net Ninja - Angular 2 Tutorial #3 - Intro to TypeScript - shows how to build a class in typescript. He is using Visual Studio Code Text Editor along with Git Bash. His tutorial helped me understand more in depth about classes. so he has this code, i am going to explain what I learn from it for each line of code:

class Car  {
    constructor(private brandName:string){
    };
    public startCar(): void{
        console.log('car started!');
    }
    // if it starts with an underscore, its means its a private function
    private    _startEgnine():void{
       
        console.log('Engined started!');
    }   
    private    ShowBrand():void{
        console.log('The brandName you selected is '+this.brandName);
    }
}
let car = new Car('Mazda');
car.startCar();
//car.startEgnine(); // you can't call _startEgnine() because its a private method inside the Car class
car.ShowBrand();

Line 1: This is the name of the class
class Car  {

Line 2: This line defines the constructor. Constructors were new to me, but constructors are used to received parameters from when you call the Class, for example, if you want to pass a variable to the class. The way i think about this is when you are using a function, you can send parameters to functions. MyName('Mike'); here, i am calling a function and sending a parameter of 'Mike' to that function.
constructor(private brandName:string){

Line 4: on this line you have what is called a METHOD. a method is just a name for a function, but this particular method is set to private which means, you cannot use it from outside the class, only within the class you can call it if its private, but since this method is public, we can call it from outside.
public startCar(): void{

Line 9: This is another method, however, this method is set to private which means you cant use it outside the class
private    _startEgnine():void{

Line 12: This is another method, again, this method is set to public so it will be use to show the car brand name on the console
private    ShowBrand():void{

Line 16: Here we set a variable to call the Car() class and send a parameter
let car = new Car('Mazda');

Line 17: Now that you have set a variable to call the class, we can use it, so we call the startCar() method which basically shows a message on the console 'Engined started!'
car.startCar();

Line 18: Pay attention to this line, you will noticed that i have comment this line so it will not run. the reason is because calling the startEngine() method inside the Car() class will not work because startEngine() method is set to private
//car.startEgnine();

Line 19: On this line, we call the ShowBrand() menthod which shows the Brandname in the console we sent to the class on line 16
car.ShowBrand();

HOpe the helps. If you are having a hard time understanding typescript classes, my suggestion is to keep practicing. You will get it soon enough. I have been trying to get this for almost a week now, but i am starting to understand classes now.