How to create angular model class or interface in Angular?


In this post, This post covers an step by step tutorial in Angular

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

Angular is front end UI framework which holds the information from browser and send 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 React model class example application.

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

We can create a model using angular cli or manually in typescript

For example, Let’s create a Employee class with Angular cli tool How to create a model class using 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 model class

Employee.model.ts

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

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

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

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

This creates class EmployeeClass in src/models folder

Add the required properties to EmployeeClass manually

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

} 

Employee is an model class which holds data of an Employee class attributes, Then,  How do you add properties to model class? You have to add 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 an data validation
  • These are available at compilation/transpilation stage only, and will not be available in production
  • Interface defines the what type data holds but not able to create a instance an interface
  • There are no methods to deal with how to add/get manipulation

Class in typescript

  • Classes are available in javascript/typescript from 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 model class variable array and stored the array data, and displayed the data in html file.

How to Create array of model class in typescript

  • First Import Model class in to your angular typescript component

  • Declare variable of model EmployeeClass array

  • Next, initialize with fixed data

  • employee data is stored in model array  - employees

Here is 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 angular template file

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

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


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

  <div>
  

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.