Insert at a selective position custom components in grid columns

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.

Presumably you have some sort of backing data model that defines how this layout is supposed to be made. What does it look like?

The Ionic / Angular way is fully asynchronous by default. If you load data from any database server (like http://135.135.135.135:your port), even MySQL, you need to be sure data is loaded in the constructor (or better, service provider in your folder structure), then use webservices to load it in an async way. Not an expert, but that’s how I would do it.
Map() is one good option to be sure the data feed is structured, then use Angular Functions to sort it like any JS TypeScript code. If your not sure about what is TypeScript, have a look at nice tutorials on javebratt.com or joshmorony.com, these are great resources Anna.

Edit : In an Angular way, I will iterate according to class or id, JavaScript way, that will use a custom CSS file according to HTML5 data attribute (that you feed before when json or XML is mapped by map(), or create a function with maths like if (ion-col < 5 = this.css = this.file.url). Just bunch ideas to achieve your goal.

Happy coding :slight_smile:

Hello,

I hope I understand you correct, than there is no data model from database or something similar.

Only given rows and each row have the same count of colums. the custom componet should have then Input()s where with startcolum and column count that specify where custom components should inserted. Once the custom components are inserted in the custom componet the grid never change again. But I want the flexibility in html maybe like <thiscom row1 =‘3 4’ row2=‘4 1’ …></thiscom or in typescript at startup or … Maybe there is a freaky kind of *ngfor with … to do that.

This brings me to a further question, were I asked about dynamic inserting of components from an array and Aaron make this Create dynamic custom components and add it to an array suggestion.

Maybe I can do that with a dummy component, that is not visible. But how to do that without a working manual I am really unsure.

Best regards, anna-liebt.

You’re really fighting the framework here.

I think in terms of templates being visual representations of data models. You seem to think of them as bags to stuff things into. Angular wants you to leave all the bag-stuffing to it.

So, I would think of it this way. We’ve already covered in that other thread the idiom of having a single component be a sort of “union” of various functionality based on some sort of discriminator property, and let’s assume that one of those states is effectively “nothing”, so we don’t have to worry about empty cells. Every cell in the grid is going to have a <thingy> in it, so the template looks like this:

<ion-grid>
  <ion-row *ngFor="let row of rows">
    <ion-col *ngFor="let cell of row">
      <thingy [params]="cell"></thingy>
    </ion-col>
  </ion-row>
</ion-grid>

Meanwhile, back in the controller, initialize rows to an array of arrays containing as many blank thingy objects as you want. That’s your data model. Assigning to it will automatically be reflected in the grid. rows[3][1] = {flavor: "cat", breed: "siamese"} puts a siamese cat in the given cell. rows[5][0] = {flavor: 'dragon', breath: 'fire'} puts a fire-breathing dragon in another.

Hello,
yes thinking in angluar and doing it in an angular way is absolutly new to me, also html, css, sass, javascript, typescript, promsises, =>, all this strange kind of functions and …

In .net I can create something by my own, do what ever i want, on every place to every time OO like, and sorry, in a more … way.

This what I want to do looks like a table, fill with nothing or with a variable component.

and what a idiot I am.

and people how are able understand what they reading (ok its for me a foreign language) have an easier life.

The difference between [hidden]=‘false’ and *ngIf=‘false’ is that the first method simply hides the element. The second method with ngIf removes the element completely from the DOM.

So *ngIf is false there is nothing, niente, rien, nic, ei mikään, nada, semmi, nichts.

So I create a list

myList = [];

fill it as much column I need with

this.myList.push({ component: 'nocomponent' }); 
//or
 this.myList.push({ component: 'mycomponent1' });// and so on

and I create as many list I need, for each row one list with literal mycomponentx or nocomponent
and then it is not really difficulty

<ion-row>
    <ion-col *ngFor='let part of myList'>
          <ng-content *ngIf='part.component == "nocomponent"'></ng-content>
          <mycomponent1 *ngIf='part.component == "mycomponent1"'></mycomponent1>
    </ion-col>
</ion-row>

and all colums are there where they should, and all of my different components are in there coluom where they should and it looks like I want.

I try to understand your thingy approach, but I don’t understand them at the moment not really how this renders the different components. But I work on it.

Thank you for your great advices. Best reards anna-liebt.

Right. The element is not put into the DOM at all. So if you want to do this with my example, you could say

<thingy [params]="cell" *ngIf="cell">

… in which case if cell is falsy there will be no component.

Sort of, but I think this is going to go more easily if there is only one kind of component (what I am calling thingy), and it can behave in different ways based on whatever goes in the cell, which it can access via an @Input property.