When we work in Angular, it's important to know that all of our code consists of classes. It is very important for us to understand how a class works and what you can and cannot do inside a class.
export class MyClass {
}
Here we have a basic empty class. The export keyword means that this code can be imported by another class. Remember that a class is similar to a blueprint; the class by itself will not actually do anything, it has to be assigned (usually to a variable) for it to actually put in work. Let's take a look at some things you would put in a class:
The constructor
export class MyClass {
constructor() {
}
}
The constructor is a basic part of every class. Any code inside the parentheses () is used for dependency injection, which we have not gone over yet so don't sweat it. The code inside the curly braces is executed any time the class is created. If you want to put any vanilla Javascript, you can totally do that and it will run as soon as the class is started. Let's add a console.log inside our example to demonstrate:
export class MyClass {
constructor() {
console.log('This class has been constructed!!!1');
}
}
In this example, the console.log is executed as soon as the class is created.
SIDE NOTE:
There are other ways to execute code when a class is created that you may have seen. More common is OnInit, less common but still useful is AfterViewInit. We will talk about exactly when this code executes when we discuss lifecycle hooks at a later time, however, for now you will see ngOnInit inside a class very often; just know that the code inside runs each time the class is loaded.
What else is commonly inside a class?
Variable declaration
You can, and often will, declare variables inside the class. They can be used throughout the entire class. Let's look at an example and examine what's different between declaring a variable inside a class and what you may be used to seeing in JS.
export class MyClass {
public myVar:string;
constructor() {
console.log('This class has been constructed!!!1');
}
}
Let's start from the beginning: The public keyword before the variable name. Declaring a variable as public means that variable can be accessed outside the class. An example of this would be when we use the interpolation brackets {{ }} to display the value of a variable in our HTML. That only works if the variable is set to public. If you set a variable to private instead of public, you will only be able to use that variable inside that class.
So why would you ever use private? Wouldn't it be easier to just set everything to public and not have to worry about whether or not we can use something? While it would indeed be easier on the coding end, by making everything public, you are giving the end user access to information that you would not want them to modify, much less see. A good example would be a password: Is that the kind of information you want the user to get? What if they were able to modify parameters of a game? If I was playing a game where I had a certain amount of lives, and I made that public, whats to preventing me from finding that variable name, going into the console and typing in "lives = 99"?
Because of this, a good rule of thumb is to make as much as you can, (especially variables) private unless you absolutely need to.
The next part is the name of the variable myVar which is all good but its followed by :string. This is declaring the type of the variable. By making myVar a string, I have declared that it can ONLY contain a string. If I try to assign it a value that is a number, I will get a compliation error.
Static typing is super important, something that will get its own lesson very soon. If you fail to give a variable a type, it will default to the type any which, as you may have guessed, can contain anything. For now get in the habit of giving everything a type. You'll thank me later.
Methods
Lets look at an example of a method being declared inside a class:
export class MyClass {
public myVar:string;
constructor() {
console.log('This class has been constructed!!!1');
}
public logMessage(message:string):void {
console.log(message);
}
}
You will notice that methods can also be public or private. This is the same as what we talked about with variables: Methods that are public can be access from outside of the class, like from the HTML, or from another class. A private method can only be called inside its own class.
Hey, this kinda looks like a function. Is that what this is?
Yes! A method is a function that is declared inside a class. You may ask yourself, what is the difference between a method and a function?
-
A method retains the scope of the entire class it is in. So all those variables we declare in the beginning of the class, but outside of the method? We can use them by utilizing the keyword this keyword, which is what the next lesson is all about.
So if you look at the example now we know a method is a type of function that is inside a class, this starts to make more sense. We can see that there is a parameter inside this method, and its taking in a variable message that we have assigned the type string. Therefore, if we tried to run this method by passing in something that wasn't a string, like logMessage(true), it wouldnt work. We can see inside the curly braces that this method is console logging the result of that variable. So if we call this method, it will log whatever we pass to it in the console.
What can you NOT put inside a class?
You are not allowed to have plain JS inside a class. Anything like a for loop, an if statement, a console.log, none of those will work. So the following will throw anexport class MyClass {
public myVar:string;
constructor() {
console.log('This class has been constructed!!!1');
}
public logMessage(message:string):void {
console.log(message);
}
console.log('I am going to cause an error');
}
Any functional code must be placed inside a method: If you want it to run right away, consider using the constructor or something like OnInit. If you want to control when it runs, put it inside a method that you create. Just know that you can not put that directly inside the class without any context.
But why?
This is a tricky question to answer. Remember that a class itself is just a blueprint; it doesn't actually do anything until we assign that class to a variable. You may have seen something similar in javascript. Behold the following:
const myDude = {
name: "J.R.",
city: "Coarsegold",
sfvMain: "Laura",
owMain: "Zarya / Zenyatta",
logMains: function() { console.log('Mains:', this.sfvMain, this.owMain) }
}
You may have seen this in Javascript before. We're giving an object properties, either as a string, for as a function inside a property. If I was to throw in a random console.log in there like so:
const myDude = {
name: "J.R.",
city: "Coarsegold",
console.log('I AM THE LOG'),
sfvMain: "Laura",
owMain: "Zarya / Zenyatta",
logMains: function() { console.log('Mains:', this.sfvMain, this.owMain) }
}
That would clearly error, right? Try to keep that in mind when wondering why you cant just throw active code inside a class.
Activating a Class
So all this blueprint stuff doesn't actually mean anything if we don't use it right? So let's look at our example class, with one addition:
export class MyClass {
public myVar:string = 'I need healing!';
constructor() {
console.log('This class has been constructed!!!1');
}
public logMessage(message:string):void {
console.log(message);
}
}
So we have our class called MyClass. The only difference is that in addition to declaring the variable myVar, we gave it a value: 'I need healing!'. So now lets look at a component that will use this class.
import { Component } from '@angular/core'
import MyClass from '../classes/myClass'
@Component({
selector: 'app-mycomponent',
templateUrl: './app-my.component.html'
})
export class MyComponent {
}
So we have our component here. Notice that we imported the class up top. This is a required step, but there's still one more thing we have to do. Don't woerry about the @Component stuff yet, we will get into decorators another time.
Remember that a class won't do anything unless we put it inside a variable. So lets do that:
import { Component } from '@angular/core'
import MyClass from '../classes/myClass'
@Component({
selector: 'app-mycomponent',
templateUrl: './app-my.component.html'
})
export class MyComponent {
private ourClass:MyClass = new MyClass;
}
So we've create a new variable named ourClass. We have made it private so that nothing outside of our component can access it. We have given it a type MyClass so that our IDE will be able to help autocomplete our code (and because set a type to things is very important). Finally, we used the new keyword to create a new instance of the class.
Remember that I said code inside a constructor is executed as soon as you create that class? By assigning our variable to be a new instance of that class, the code inside the constructor of the class runs automatically so you will have that console.log pop up immediately.
Now that we've created an instance of the class, we have access to the variables and methods inside of it, as long as they are set to public. So if I called for the value of ourClass.myVar, its going to look it the class for the value of that variable and find 'I need healing!'
We can also use it's methods too: We could call ourClass.logMessage('Arf') and it would execute the method logMessage() that we declared in the class, and we would get a console log displaying "Arf".
Summary
Classes will seem weird at first, but understanding the structure of a class is super important when we start building things in angular. It allows us to create blueprints for cool things that we can construct simply by calling those blueprints with the new keyword. It will take some practice knowing exactly where you can place code, where you can't, and most importantly how it is running, but understanding this is a significant step.