Insert at a selective position custom components in grid columns

@anna_liebt wrote:

Hello,
static I have in a custom component a grid with 6 rows and each 9 columns. In each row is a custom component. But not in each column. So what I want to make dynamic is the first colums where I insert a custom componet and how many colums I do that. See for example row 2 where first column is 3 and 4 columns long.

Another thing ist row5 where 2 different custom components are inserted.

<ion-grid>
      <ion-row>
          <ion-col><comp1></comp1></ion-col>
          <ion-col><comp1></comp1></ion-col>
          <ion-col><comp1></comp1></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
      </ion-row>
      <ion-row>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col><comp2></comp2></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
      </ion-row>
      <ion-row>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
      </ion-row>
      <ion-row>
          <ion-col><comp4></comp4></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
      </ion-row>
      <ion-row>
        <ion-col><comp1></comp1></ion-col>
        <ion-col><comp1></comp1></ion-col>
        <ion-col><comp1></comp1></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col><comp3></comp3></ion-col>
          <ion-col></ion-col>
          <ion-col></ion-col>
      </ion-row>
      <ion-row>
          <ion-col><p>1</p></ion-col>
          <ion-col><p>2</p></ion-col>
          <ion-col><p>3</p></ion-col>
          <ion-col><p>4</p></ion-col>
          <ion-col><p>5</p></ion-col>
          <ion-col><p>6</p></ion-col>
          <ion-col><p>7</p></ion-col>
          <ion-col><p>8</p></ion-col>
          <ion-col><p>9</p></ion-col>
      </ion-row>
    </ion-grid>

In a .net grid I will iterate over the rows and colums and do what I want. But how ist the angular way to do this? Any ideas?

Thanks in advance and best regards, anna-liebt.

Posts: 6

Participants: 3

Read full topic