Difference between Class and Interface in Angular

What are the Class and Interface?

Here we going to learn the difference between Class and Interface in Angular. Before we jump into the topic, let’s first understand What is Class and Interface?

Class: Classes are the fundamental entities used to create reusable components. It is a group of objects which have common properties. It can contain properties like fields, methods, constructors, etc.

Here is an example of Class

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

Interface: An Interface defines a structure that acts as a contract in our application. It contains only the declaration of the methods and fields, but not the implementation.

Here is an example of Interface

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

Implement Interface in component

Now we will move on the next topic about how can we implement Interface in angular. There are two way to perform operations, and we will see both of them by example.
1. Our first topic is to use Interface In 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. Now let’s move on 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 specific difference between Class and Interface.

Class Interface
Introduction Classes are the fundamental entities used to create reusable components. It is a group of objects which have common properties. It can contain properties like fields, methods, constructors, etc. An Interface defines a structure that acts as a contract in our application. It contains only the declaration of the methods and fields, but not the implementation.
Usage It is used for object creation, encapsulation for fields, methods. It is used to create a structure for an entity.
Keyword Create using the class keyword. Create using the interface keyword.
Compilation A class cannot disappear during the compilation of code. Interface completely disappeared during the compilation of code.
Real-Time Usage Design Pattern, Designing project Structure Implements of defined Architectures
Instantiation A class can be instantiated to create an object. An interface cannot be instantiated.
Methods The methods of a class are used to perform a specific action. The methods in an interface are purely abstract (the only declaration, not have a body).
Access Specifier The members of a class can be public, protected, or private. The members of an interface are always public.
Constructor A class can have a constructor. An interface cannot have a constructor.
Implement/Extend A class can extend only one class and can implement any number of the interface. An interface can extend more than one interface but cannot implement any interface.

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories