Creating An Interface In Angular

In Angular, an interface is a TypeScript feature that defines the shape or structure of an object. It helps developers enforce type safety by specifying what properties and types an object must have.

Interfaces do not generate JavaScript code but are used during the development phase to ensure that objects conform to a specific shape. They are highly beneficial in web development for improving code maintainability readability and scalability by preventing common type errors.

Importance of Interfaces in Web Design

• Type Safety: Interfaces ensure that data conforms to a defined structure which reduces runtime errors.
• Maintainability: Enforcing consistent data structures and interfaces makes the codebase easier to maintain and refactor.
• Scalability: Interfaces allow large applications to manage complex data structures in a predictable and organized manner.
• Readability: Clearly defined interfaces help other developers understand the shape of the data being used improving overall code readability.

There are two common approaches to creating an interface in Angular

1. Basic Interface Declaration

In Angular, a Basic Interface Declaration defines the structure of an object with strict rules about what properties and methods it must contain. This helps in maintaining type safety throughout the application ensuring that objects conform to a specific shape during development.

Syntax

interface InterfaceName {
    property1: Type;
    property2: Type;
    method1(param: Type): ReturnType;
}

• InterfaceName: The name of the interface.
• property1 and property2: Properties that define the structure of the object including their types.
• method1: Method with specified parameters and a return type.

Example

interface User {
    name: string;
    age: number;
    email: string;
}

2. Interface with Optional Properties

In this approach you can define optional properties or methods by using a ?. Optional properties/methods may or may not be present in an object that implements the interface.

Syntax

interface InterfaceName {
    property1: Type;
    property2?: Type;  // Optional property
    method1?(param: Type): ReturnType;  // Optional method
}

Example

interface User {
    name: string;
    age?: number;  // Optional property
    email: string;
}

Steps To Create Interface In Angular

Here we provide a sample example for achieving creating an interface in different ways with related examples outputs for your reference. Below we provide step by step process for creating interface in angular.

Step 1 : Create A New Angular Application

First we need create a sample angular application by using below command. And Once project created then navigate project folder open It in any IDE.

ng new project-name
cd project-name

Project Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 2 : Create an Interface

Once Project is created successfully then create a User.ts file in the App folder which is located in src folder. In that User component we define an Interface with some fields.

//User.ts

export interface User {
    name: string;
    age?: number;
    email: string;
  }
  

Step 3 : Update Source code

Once Interface is created we need export that interface into our component class. Here we use app.component.ts as a component and we export that User interface into this component. As we well as we update the app.component.html file also. Below we provide that source code for you reference.

<!--app.component.html-->

<h1>User Info</h1>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
<p>Age: {{ user.age }}</p>

//app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { User } from './User';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    user: User = {
        name: 'Jane Smith',
        email: '[email protected]',
        age: 30
    };
    title = 'interfaces';
}

Step 4 : Run the Application

Once development is completed. Now run the application by using below command and the angular application by default runs on port number 4200.

ng serve

Output

Once Project is running successfully then open below mentioned URL and test the output.

http://localhost:4200/