#Angular5 - a general #component to list data

You can consider this way to create a general data listing component. Create an interface for the data such as following:

Angular Homepage
Angular Homepage


interface ListItem {
  info: string;

Transform the data that you want to list to comply with the interface and thus can be interpreted by the ListDataComponent. Your ListDataComponent can then list the data according to the properties in the interface.

import { Component, OnInit, Input } from '@angular/core';
import { ListItem } from 'models/listItem.model';
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss’]
export class DataListComponent implements OnInit {
  @Input() public items: ListItem[];

  constructor() {}

  ngOnInit() {}


  <li *ngFor='let item of items; let i = index'>{{i + 1}}: {{item.info}}</li>

Using it in a template

<data-list [listItems]="listItems"></data-list>

Thanks for reading!