How to declare an array of objects in Angular|typescript

How to declare an array of objects in Angular|typescript

This example covers the Angular example in typescript.

  • Declare and Initialize an array of objects with values
  • Array of Type
  • Using an interface to hold an array of objects

An array of objects is populated and displayed on the Dropdown or radio button display.

There are multiple ways we can create an array of objects.

How to declare and Initialize an array of objects with values

Declare and initialize an array using the any/object type declared as follows

Objects are properties that contain keys and values, There is no type to represent the object in Typescript and angular.

An array of strings can be declared and initialized with the below syntax.

private arrays:Array<string> = ['one','two','three'];

In typescript, an Object can be declared using the any type.

  public books: Array<any> = [
    { title: "book1", description: "book desc 1" },
    { title: "book2", description: "book desc 2" },
    { title: "book3", description: "book desc 3" },
    { title: "book4", description: "book desc 4 " }
  ];

The same replaced any with the object type.

    public books: Array<object> = [
    { title: "book1", description: "book desc 1" },
    { title: "book2", description: "book desc 2" },
    { title: "book3", description: "book desc 3" },
    { title: "book4", description: "book desc 4 " }
  ];

Array of type alias object

In Angular using the type keyword in typescript allows for creating new alias for custom type.

Created employee object alias and created an array of type alias.

type Employee = Array<{ id: number, name: string }>;

In the below example

  • Created employee alias of array type
  • Initialized array with object values
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-basic",
  templateUrl: "./basic.component.html",
  styleUrls: ["./basic.component.css"],
})
export class BasicComponent implements OnInit {
  employees: Employee = [
    { id: 1, name: "Ram" },
    { id: 2, name: "John" },
    { id: 3, name: "Franc" },
    { id: 4, name: "Andrew " },
  ];
  constructor() {}

  ngOnInit() {}
}
type Employee = Array<{ id: number, name: string }>;
<ul>
  <li *ngFor="let emp of employees">{{emp.name}}</li>
</ul>

The same syntax can be rewritten using a shorter version.

const employees: Array<{ id: number, name: string }> = [
  { id: 1, name: "Ram" },
  { id: 2, name: "John" },
  { id: 3, name: "Franc" },
  { id: 4, name: "Andrew " },
];

Declare an array of objects using the interface type

The above approach has some drawbacks if the object contains multiple properties and it is difficult to handle.

This approach creates an interface to hold object data in angular and typescript codebase. It is useful to handle data coming from the backend/database via REST APIs.

You can create an interface using the below command.

ng g interface Book

It generates a book.ts file

export interface Book {
  id: number;
  name: string;

  constructor(id,name) {
      this.id = id;
      this.name = name;
    }
}

In the Angular typescript component, You can create an interface for Book

import { Component, OnInit } from "@angular/core";
import {Book} from './Book'
@Component({
  selector: "app-basic",
  templateUrl: "./basic.component.html",
  styleUrls: ["./basic.component.css"]
})
export class BasicComponent implements OnInit {
  public books: Book[] = [
    { id: 1, name: "Book 1" },
    { id: 2, name: "Book 2" },
    { id: 3, name: "Book 3" },
    { id: 4, name: "Book 4 " }
  ];
  constructor() {}

  ngOnInit() {}
}