Angular Tutorial: Classes and Interfaces

Welcome to our Angular tutorial on Classes and Interfaces! In this comprehensive guide, we'll dive deep into these essential concepts, making them easy to understand and apply. Let's get started!

Understanding Classes 🎯

In Angular, classes are the blueprints for creating objects, often referred to as instances. They define the structure and behavior of those objects.

typescript

class MyClass {
  // Properties
  myProperty: string;

  // Constructor
  constructor() {
    this.myProperty = 'Hello, World!';
  }

  // Methods
  greet() {
    console.log(this.myProperty);
  }
}

// Creating an instance (object) of MyClass
const myInstance = new MyClass();
myInstance.greet(); // Output: Hello, World!

💡 Pro Tip: Every class should have a unique name, and it should start with a capital letter.

Class Properties 📝

Class properties define the characteristics of an object. They are initialized in the constructor or during instantiation.

typescript

class MyClass {
  myProperty: string;

  constructor(property: string) {
    this.myProperty = property;
  }
}

const myInstance = new MyClass('New Value');

Class Methods 📝

Class methods define the actions an object can perform. They are functions within the class.

typescript

class MyClass {
  myProperty: string;

  constructor(property: string) {
    this.myProperty = property;
  }

  greet() {
    console.log(`Hello, ${this.myProperty}!`);
  }
}

const myInstance = new MyClass('New Value');
myInstance.greet(); // Output: Hello, New Value!

Introducing Interfaces 🎯

Interfaces in Angular define a set of properties and methods that a class must implement. They help enforce consistency and modularity within your application.

typescript

interface MyInterface {
  myProperty: string;
  greet(): void;
}

class MyClass implements MyInterface {
  myProperty: string;

  constructor(property: string) {
    this.myProperty = property;
  }

  greet() {
    console.log(`Hello, ${this.myProperty}!`);
  }
}

📝 Note: Implementing an interface means the class must have the same properties and methods as specified in the interface.

Putting it all together 🎯

typescript

interface Person {
  name: string;
  age: number;
  greet(): void;
}

class User implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, ${this.name}! You are ${this.age} years old.`);
  }
}

const userInstance = new User('John Doe', 30);
userInstance.greet(); // Output: Hello, John Doe! You are 30 years old.

Quiz 🎯

That's it for this lesson! In the next part, we'll dive deeper into advanced topics using classes and interfaces in Angular. Stay tuned! 🚀