How to declare array of objects in Angular|typescript


This example covers Angular example in typescript

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

Array of objects is populated and displayed to Dropdown or radio button display.

There are multiple ways we can create a array of objects

How to declare and Initialize array of objects with values

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

Objects are properties which contains key and values, There is no type to represent object in Typescript and angular

Array of strings can be declared and initialized with below syntax

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

In typescript, Object can be declared using 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 can be replaced any with 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 type keyword in typescript allows to create new alias for custom type.

Created employee object alias and created 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 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 array of objects using interface type

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

This approach is to create a interface to hold object data in angular and typescript codebase. This is very useful handle data coming from backend/Database via REST API’s

You can create interface using below command

ng g interface Book

It generates book.ts file

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

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

In Angular typescript component, You can create an interface 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() {}
}

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.





Related posts

Angular Material list | Best mat-list and item examples

Fix for Property has no initializer and is not definitely assigned in the constructor

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to convert number to words in Angular|Typescript example

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.