This is the division that iterates through each individual division. I have utilized simple div elements to create seven columns in a single row. Below you will find app.component.html
<div class="alphacolumn" *ngFor="let alpha of alphacustomer">
<p class="sort">{{alpha.order}}</p>
<div class="cus-box" *ngFor="let custo of alpha.data">
{{custo.customer}}</div>
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
alphacustomer:any[];
slectedCustomer:any;
constructor() {
this.alphacustomer=[
{
order:"A-B",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
]
},
{
order:"C-E",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
]
},
{
order:"F-L",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
]
},
{
order:"M-P",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
]
},
{
order:"Q-S",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNames"},
]
},
{
order:"T-Z",
data:[
{customer:"CountryNames"},
{customer:"CountryNames"},
{customer:"CountryNamess"},
]
}
];
}