Elastic textbox something for terminal application, maybe?

Ionic Framework ionic-v3
1

I’m building a simple terminal application, basically a text box with command input and response from the other end.
I would appreciate any comment and suggestion how to do that. Maybe there is a way better method. Hope you can help.

On Ionic-1 it worked sort of ok by doing this:

<ion-scroll direction="y" style="width: 100%; height: 200px !important;">
            <ion-list ng-style="{'max-height':'250px'}">
                <ion-item ng-repeat="yourQuote in array track by $index"
                          class="my-item"
                          class="item-remove-animate">
                    <p>{{yourQuote}}</p>
                </ion-item>
            </ion-list>
        </ion-scroll>

Commands and responses are usually strings, line oriented. I’m concatenating and deleting older responses in the code.
But I’m having trouble in Ionic3 deciding what component to use and how to get the layout done better. I played around with ion-textarea, but nothing worked. What I have so far, and it’s terrible, is:

        <ion-scroll direction="y" style="width: 100%; height: 100% !important;">
            <ion-label floating>Terminal</ion-label>
            <ion-list no-lines>
                <ion-item *ngFor="let line of terminal">{{line}}</ion-item>
            </ion-list>
        </ion-scroll>

Problems I can’t solve:

  1. list items are way to high
  2. the scroll bar does not even show up
  3. automatic adjust number of lines when orientation changes or keyboard popup
  4. desktop browser as well as native on iOS should look ok
  5. the last item is not on the bottom of the terminal, as expected
  6. even though I limit the number of lines in the array, to get to show the last line on the bottom, I can’t figure out how many lines are currently displayed
   while( this.terminal.length > 10 ) {
            this.terminal.shift();
        }

Any ideas? I could not find examples on Github for that.

2

I like the fz-elastic directive.

3

thanks!
it worked out ok, looks better, I’ll post soon on Github