Difference Between Class And Interface In Angular

The Code Points September 25, 2022 0

In this article, we will discuss about the how class and interface differentiate in Angular. Let's first understand the subject before diving into it. 

What is Class ?

The fundamental entities usable to create components are classes. It is a collection of items with similar characteristics. It may include attributes like fields, methods, constructors, and so on.

For example,

export class ProductLocationComponent implements OnInit {
    clientCode: number;
    clientName: string;
}

What is Interface ?

In our application, a contract-like structure is defined through an interface. The implementation is absent; it simply contains the declaration of the fields and methods.

For example,

export interface Student {
    id: number;
    name: string;
}

Now we'll move on to the following topic, which is how to implement an interface in Angular. There are two methods for performing operations, and we will see each of them demonstrated.

1. The first item we will cover is how to use an interface in an angular component.

import { Component } from '@angular/core';

interface Student {
    id: number;
    name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

  name = 'Angular';
  students: Student[] = [
    {id: 1, name: "Hardik"},
    {id: 2, name: "Paresh"},
    {id: 3, name: "Rakesh"},
  ]
}

2. Let us now proceed to our next point: export Interface in Component.

//src/app/vendor.ts => interface component location and name
export interface Vendor {
    id: number;
    name: string;
}

import { Component } from '@angular/core';
import { Vendor } from './vendor';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';   
  students: Student[] = [
    {id: 1, name: "Hardik"},
    {id: 2, name: "Paresh"},
    {id: 3, name: "Rakesh"},
  ]
}

Here is the key difference between Class and Interface.

	Class	Interface
Introduction	Classes are the basic entities that are utilized to generate reusable components. It is a collection of things with similar properties. It can have attributes like as fields, methods, constructors, and so on.	An interface defines a structure that serves as a contract in our program. It just provides the declaration of the methods and fields, not their implementation.
Usage	It is used to create objects as well as encapsulate fields and methods.	It is used to define the structure of an entity.
Keyword	Make use of the class keyword.	Make use of the interface keyword.
Compilation	A class cannot vanish during code compilation.	During code compilation, the interface vanished totally.
Real-Time Usage	Pattern Design, Project Structure Design	Architectures that are implemented
Instantiation	An object can be created by instantiating a class.	An object can be created by instantiating a class.
Methods	A class's methods are used to carry out a certain action.	An interface's methods are totally abstract.
Access Specifier	A class's members can be public, protected, or private.	The members of an interface are constantly visible to the public.
Constructor	A constructor can be found in a class.	A constructor is not allowed in an interface.
Implement/Extend	A class can only extend one other class and implement any number of interfaces.	An interface can extend many interfaces but cannot implement any of them.

Conclusion

In this article, we learned about the how class and interface differentiate in Angular.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.