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.

ClassInterface
IntroductionClasses 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.
UsageIt is used for object creation, encapsulation for fields, methods.It is used to create a structure for an entity.
KeywordCreate using the class keyword.Create using the interface keyword.
CompilationA class cannot disappear during the compilation of code.Interface completely disappeared during the compilation of code.
Real-Time UsageDesign Pattern, Designing project StructureImplements of defined Architectures
InstantiationA class can be instantiated to create an object.An interface cannot be instantiated.
MethodsThe 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 SpecifierThe members of a class can be public, protected, or private.The members of an interface are always public.
ConstructorA class can have a constructor.An interface cannot have a constructor.
Implement/ExtendA 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