How to create an angular model class or interface in Angular?

How to create an angular model class or interface in Angular?

In this post, This post covers a step-by-step tutorial in Angular.

  • How to create a model class in an angular application using CLI or manually?
  • How to generate a model interface in a typescript application using CLI or manually?
  • When to use classes or interfaces for models in Angular applications?
  • Initialize the model class with an array of objects in typescript
  • Display model classes data in the angular template file

Angular is a front-end UI framework that holds the information from the browser and sends it to Database.

To store the information, Model classes need to be created.

Model classes can be of type interface or classes, Let’s see how we can create and add attributes manually.

You can check the React model class example application.

How to create a model class in an angular application using CLI or manually?

We can create a model using angular CLI or manually in typescript.

For example, Let’s create an Employee class with the Angular CLI tool How to create a model class using the angular CLI ng command

ng generate interface Employee --type=model or
ng g interface Employee --type=model

This creates Employee.model.ts typescript empty file in src/model.

Let’s add properties id, name, and salary to the model class.

Employee.model.ts

export interface Employee1 {
  id: number;
  firstName: string;
  lastName: string;
  salary: number;
}

How to generate a model interface in a typescript application using CLI or manually?

The following is the angular CLI command to create a model class in typescript applications

ng generate class EmployeeClass --type=model
ng g class EmployeeClass --type=model

It creates the class EmployeeClass in the src/models folder.

Add the required properties to EmployeeClass manually

export class EmployeeClass {
  private id: number;
  private name: string;
  private salary: number;
}

The employee is a model class that holds data of an Employee class attributes, Then, How do you add properties to the model class? You have to add a setter/getter or constructor to initialize this class

export class EmployeeClass {
  private id: number;
  private firstName: string;
  private lastName: string;
  private salary: number;

  constructor(id: number, firstName: string, lastName, salary: number) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = salary;
  }

  getName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  getYearlySalary(): number {
    return 12 * this.salary;
  }
}

When to use class or interface for models in Angular application?

interface in typescript:

  • Interfaces are used to type checking of a data validation
  • These are available at the compilation/transpilation stage only, and will not be available in production
  • Interface defines what type of data holds but is not able to create an instance of an interface
  • There are no methods to deal with how to add/get manipulation

Class in typescript:

  • Classes are available in javascript/typescript from the ES6 javascript version only.
  • This also helps to do type checking
  • This will be available and generates classes code during compilation/transpilation
  • You can add custom methods or setter/getter or constructor for data manipulation

Angular model class example

In this example, Created a model class variable array and stored the array data, and displayed the data in an HTML file.

How to Create an array of model classes in typescript

  • First, Import the Model class into your angular typescript component

  • Declare a variable of the model EmployeeClass array

  • Next, initialize with fixed data

  • employee data is stored in the model array - employees

Here is the complete typescript component

import { Component, VERSION } from "@angular/core";
import { EmployeeClass } from "../EmployeeClass";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  employees: EmployeeClass[] = [
    new EmployeeClass(1, "john", "sedwik", 5000),
    new EmployeeClass(2, "Ram", "Kumar", 6000),
    new EmployeeClass(3, "Fran", "Andrew", 10000),
  ];
}

How to Display model classes data in the angular template file

Once the model class has the data in a variable, using ngFor directive, Iterated all employees

In the Angular HTML template file, Displayed the model data using ngFor iteration

<div *ngFor="let emp of employees">
  <span
    >{{emp.getName()}} -
    <span
      >{{emp.getYearlySalary()}}

      <div></div></span
  ></span>
</div>

Conclusion

In Summary, We can either create a class or interface in the Angular application for holding model data, I will also start with an interface for type checking, if there are any data manipulation methods, Convert the interface to class and use it in the Angular application.