How to load my array dynamically to the columns of my mega menu using typescript?

Issue

Am using this code. In ts file.

images = ['A','B','C','D','E','F','G','H','I','J','K'];

In html file.

<ion-segment-button *ngFor="let img of images;">
  {{img}}
</ion-segment-button>

Am getting the structure like below:

A B C

D E F

G H I

J K

But I need this below:

A E I

B F J

C G K

D H

and also i need some of the array elements as bold.(B,G,K) Thanks in advance.

Solution

I assume you are using Ionic with Angular.

Let's say the parent container having the buttons is a div having a class named container:

<div class="container">
  <ion-segment-button *ngFor="let img of images;">
    {{img}}
  </ion-segment-button>
</div>

Now you can just set columns on the container:

.container {
  display: block;
  columns: 3;
  column-gap: 10px;
}

ion-segment-button {
  display: block;
}

And for displaying some of them as bold:

HTML:

<ion-segment-button *ngFor="let img of images;">
  <span [ngClass]="{'text-bold': displayAsBold(img)}">
    {{ img }}
  </span>
</ion-segment-button>

TS:

displayAsBold(img) {
    const bolds = ['B', 'G', 'K']; // whatever you want to display as bold
    return bolds.includes(img);
}

CSS:

.text-bold {
   font-weight: bold !important;
}

Answered By - topmoon