Input html thanks Typescript object


#1

Hi everyone !! :slight_smile:

I would like to have some advice …

My app is divided in two parts, first the aim, is to connect th IonicApp to a Raspberry , and it’s why i make the first part of this app, it’s only a viewer to interact with the raspberry, and the second part of the app it’s another viewer with an add button, to add the previous viewer for one raspberry.

So i have in pages “home” and “viewer”, the rootPage is “viewer”.

So i want in the viewerPage, when you clicked on the add button, you add an “object” from home. (<ion-col width-25><page-rasp class="center"></page-rasp></ion-col>: this line in html)
I did it manually in the HTML and it looks like this:

<ion-grid text-center>
    <ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>
    <ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>
  </ion-grid>

How i can do this in Typescript ??? How i can implement html code thanks to a call from typescript file?


#2

I might not understand this correctly, but if I do: define an array of users in your controller (the TypeScript) and in your template enumerate that array using *ngFor.


#3

I try to make a better explanation:

i want to call an instance of HomePage for each click on the add button so:

Click add button --> new HomePage() + <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>in viewer.html


#4

Thanks. I understood you correctly then.


#5

Yeah !! :wink:
And i don’t know how i can do that ! :confused:


#6

Hello,

maybe you can make instead of a page a component.

Each time you click on whatever you add a object, that representing your datas, to a array.

With ngfor you iterate in html over your array.

Little bit pseudo code
in html: itemlist is array with objects containing data needed for component
item ist one of the entrys in the array
mycomp is your component
item.prop1 is bind to prop1 in your mycomponent

<div *ngFor='let item of itemlist'>
         <mycomp [prop1]='item.prop1'  [prop2]='item.prop2'></mycomp>
  </div>

in .ts you add something like

itemlist.push({prop1: 'Hallo',  prop2: 'Wow'})

Creating a custom component look for exsample here https://www.joshmorony.com/custom-components-in-ionic-2/

Best regards, anna-liebt


#7

item ist one of the entrys in the array
mycomp is your component
item.prop1 is bind to prop1 in your mycomponent

I don’t have data in a viewer of raspberry, if there is one is a string for the constructor and is passed thanks to the click on the button, is just an interface to interact with raspberry.

I want to have this:

<ion-grid text-center>
    <ion-row wrap>
    </ion-row>
  </ion-grid>

and you click on the button, call a constructor HomePage(String) and this happen:

<ion-grid text-center>
    <ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>
  </ion-grid>

#8

Hello,

<ion-grid text-center>
    <ion-row wrap *ngFor='let item of itemlist'>
      <ion-col width-25><p>{{item}}</p></ion-col>
    </ion-row>
  </ion-grid>

In your .ts create a array called itemlist and a method for your button click. On each button click add a string to itemlist and see whats happen.

If this is working remove <p>{{item}}</p> with your custom component.

Best regards, anna-liebt


#9

So i wrote this :

<ion-grid text-center>
   <ion-row wrap *ngFor='let item of itemlist'>
     <ion-col width-25><p>{{item.component}}</p></ion-col>
   </ion-row>
 </ion-grid>

and in my ts file just to make a test i wrote this:

this.itemlist = [{ component: '<page-rasp class="center"></page-rasp>' }];

and it’s not working it doens’t read the html code as html, but like a string … :confused:


#10

Hello,
yes that it is would it should do. <p>{{item.component}}</p> should show you how ngfor with an element, here p, is working.

So great your *ngif is working, your access to to the array is working.

A page is similar to a custom component, so there is not so much to do. Create a custom component, and put your html from page to html of custom component. For testing you can make a simple html, like <p>Hello</p>

Maybe your custom compent has a selector like mycustomcomponent, then you can use it in your page as <mycustomcomponent></mycustomcomponent>

For testing you can put in on your page like any other tag.

That your component is a known element you must import it.
Depending if you use lazyloading or not you must import in in the right way to your page. For lazy loading you import in yourpage.module.ts and add it to Imports.

Import { MycustomcomponentModule } from '../../../components/mycustomcomponent.module';

imports: [
    MycustomcomponentModule ,

and

If this is working and your custom componet is showing in your page you can replace in ngfor <p>{{item.component}}</p>with <mycustomcomponent></mycustomcomponent>

For each entry in your array <mycustomcomponent></mycustomcomponent> ngfor will draw it for you.

For better english and better explaination look to the tutorials.

Best reagards, anna-liebt


#11

OK understood
I just have to replace item by mycomponent !!!

It’s working but it create another row each time i create an item like this:

<ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>
<ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>
<ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>

and not like this:

<ion-row wrap>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
      <ion-col width-25><page-rasp class="center"></page-rasp></ion-col>
    </ion-row>

#12

hello,

put your ngFor there, whatever you want to be repeated.

For dig deeper https://angular.io/guide/structural-directives

Best regards, anna-liebt.


#13

Ok I find !!!
Really nice !

I need to do the same thing or not ? If i want to create another row ! That mean my first array have 4 components in, and at 4 I want to create another row to put 4 others components in the new row.

May be in the ts file i need to create another array too??


#14

Hello,

Maybe I understood it not right.

You bind each ngfor to an array.

<div *ngFor='let item of itemlist'></div>
<p *ngFor='let item of itemlist2'></p>

Depending to the lenght of the arrays the ngfors will draw for example div div div p p

For a ngfor inside a ngfor you create an array inside an array. where itemlist is an array and item is an array inside itemlist.

<div *ngFor='let item of itemlist'>
<p *ngFor='let p of item'></p>
</div>

for example a dynamic div table

<div class="table">
  <div class="tr" *ngFor='let row of rows'>
    <div class="td" *ngFor='let item of row'>
      <mywhatever></mywhatever>
    </div>
  </div>

Best regards, anna-liebt


#15

Thanks really really nice, i keep this !!!

I can do something really great with that !!!