title: Dynamic GridLayout in nativescript with angular 2
body: <p>I'm very new to Nativescript and Angular and it's my first stab at mobile app development, so please bear with me.</p>
  
  <p>I'm trying to create a basic app with Angular2 and Nativescript. What I'm trying to do, is to display 3 buttons at the bottom of the screen when the app starts (these are created dynamically on initialisation). Once you click any of these buttons, I want this row to be moved up and a second row of buttons to appear. The transition should be animated.</p>
  
  <p>In the first approach I tried I couldn't add the GridLayout to my DockLayout.</p>
  
  <p>The home.html file</p>
  
  <pre><code>&lt;DockLayout #container stretchLastChild="false"&gt;
  &lt;/DockLayout&gt;
  </code></pre>
  
  <p>the home.component.ts file snippet</p>
  
  <pre><code>export class HomePage implements OnInit {
  
      @ViewChild("container") container: DockLayout;
  
      constructor(private _router: Router, private page: Page) {
          var view = new View();
      }
  
  
      ngOnInit() {
          this.page.actionBarHidden = true;
          this.page.backgroundImage = this.page.ios ? "res://background_large_file.jpg" : "res://background_large_file";
          console.dir(this.container);
  
  
          //Create the grid layout on the page
          var bottomNav = new GridLayout();
  
          //Add the GridLayout Columns
          bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));
          bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));
          bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));
  
          //Add the GridLayout Row
          bottomNav.addRow(new ItemSpec(1, GridUnitType.auto));
  
          //Create the buttons
          var FButton = new Button();
          FButton.text = "F";
          var BButton = new Button();
          BButton.text = "B";
          var CButton = new Button();
          CButton.text= "C";
  
          //Position the buttons
          FButton.set('row', '0');
          FButton.set('col', '0');
          BButton.set('row', '0');
          BButton.set('col', '1');
          CButton.set('row', '0');
          CButton.set('col', '2');
          bottomNav.addChild(FButton);
          bottomNav.addChild(BButton);
          bottomNav.addChild(CButton);
  
          //Attempt to add to DockLayout container
          --This is the part I can't get working
  
      }
  }
  </code></pre>
  
  <p>The other approach I was considering would be to hardcode my template and only show the first row. On tap of one of the buttons in the first row I'd move it up and fade in the second row. I couldn't get the reference to the GridLayouts on the page to allow me to do this. I'm thinking I might need to use "let container = this.container;" but am a bit unsure on this.</p>
  
  <p>The home.html file</p>
  
  <pre><code>&lt;DockLayout #container stretchLastChild="false"&gt;
      &lt;GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden"&gt;
          &lt;Button text="M" row="1" col="0"&gt;&lt;/Button&gt;
          &lt;Button text="F" row="1" col="1"&gt;&lt;/Button&gt;
          &lt;Button text="D" row="1" col="2"&gt;&lt;/Button&gt;
      &lt;/GridLayout&gt;
      &lt;GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial"&gt;
          &lt;Button text="F" row="0" col="0" (tap)="showF()"&gt;&lt;/Button&gt;
          &lt;Button text="B" row="0" col="1" (tap)="showB()"&gt;&lt;/Button&gt;
          &lt;Button text="C" row="0" col="2" (tap)="showC()"&gt;&lt;/Button&gt;
      &lt;/GridLayout&gt;
  &lt;/DockLayout&gt;
  </code></pre>
  
  <p>The home.component.ts file</p>
  
  <pre><code>export class HomePage implements OnInit {
      @ViewChild("container") container: DockLayout;
  
      constructor(private _router: Router, private page: Page) {
          var view = new View();
      }
  
      ngOnInit() {
        this.page.actionBarHidden = true;
      }
  
      showC() {
          let container = &lt;View&gt;this.container;
          container.animate({
                  opacity: 1,
                  duration:200
          });
  
          console.log('in here');
      }
  }
  </code></pre>
  
  <p>The final layout I'm aiming for is (any taps on the new row of buttons - #second_row - will navigate off to other pages once I set up on tap events and routing):</p>
  
  <pre><code>&lt;DockLayout #container stretchLastChild="false"&gt;
      &lt;GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden"&gt;
          &lt;Button text="M" row="1" col="0"&gt;&lt;/Button&gt;
          &lt;Button text="F" row="1" col="1"&gt;&lt;/Button&gt;
          &lt;Button text="D" row="1" col="2"&gt;&lt;/Button&gt;
      &lt;/GridLayout&gt;
  
      &lt;GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial"&gt;
          &lt;Button text="F" row="0" col="0" (tap)="showF()"&gt;&lt;/Button&gt;
          &lt;Button text="B" row="0" col="1" (tap)="showB()"&gt;&lt;/Button&gt;
          &lt;Button text="C" row="0" col="2" (tap)="showC()"&gt;&lt;/Button&gt;
      &lt;/GridLayout&gt;
  &lt;/DockLayout&gt;
  </code></pre>
  
  <p>I would appreciate any help and advice on the subject.</p>
  
  <p>Thanks in advance!</p>