How to Use Interface in Angular?

By Hardik Savani | April 20, 2020 | Category : Angular


Hi Dev,

In this tutorial, you will learn how to use interface in angular component. you can understand a concept of angular interface example. you'll learn how to use interface in angular. We will use angular export interface example.

I will simply explain what is an interface in angular and why we have use interface in angular component. you can easily use interface in angular 6, angular 7, angular 8 and angular 9 application.

Let's see bellow explaination and instruction about interface in angular app.

What is Interface in Angular?

Interface is a specification that identifies a related set of properties and methods to be implemented by a class. So basically using interface you can set some basic rules for your properties and methods using class.

Sometime we are creating object array with specific datatype field like id has to be integer or number, name has to be string value, birth of date have date datatype data. but sometime we might have misteck and set string value instead of integer or number then it cought problem and your app will show you error. But if you use interface then it will solve problem when you write code on your IDE. IDE will show you error quiky where is a problem.

How to Define Interface in Angular?

Here, i will show you very simple example how to define interface class in angular. you can see bellow code for defining interface.

export interface Student {

id: number;

name: string;

}

export:The export keyword will help to use import this class on other component and class.

interface:The interface ia a keyword so using this keyword you can set interface.

Student: Student is a class name that describe interface details.

Now let's see two example as bellow:

How to Use Interface in Angular Component?

src/app/app.component.ts

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"},

]

}

Angular Export Interface Class Example

src/app/student.ts

export interface Student {

id: number;

name: string;

}

src/app/app.component.ts

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

import { Student } from './student';

@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"},

]

}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: