Assigning Child Component Elements To Parent GridLayout

Child components can't be assigned to gridlayouts, but the child component's elements can be

  •         
    
    import {
        Component,
        OnInit,
        Input,
        AfterViewInit,
        ElementRef,
        ViewChild
    }                               from "@angular/core";
    ​
    // UI
    import {StackLayout}            from "ui/layouts/stack-layout";
    import {GridLayout}             from "ui/layouts/grid-layout";
    ​
    @Component({
        selector: "child-component",
        directives: [],
        providers: [],
        template: `
            <StackLayout #container
                orientation="horizontal"
                verticalAlignment="center">
    ​
                <Label
                    text="Hello">
                </Label>
    ​
                <Switch
                    checked="false">
                </Switch>
            </StackLayout>
        `
    })
    export class ChildComponent implements OnInit, AfterViewInit {
    ​
        // Elements
        @ViewChild("container") container: ElementRef;
        
        constructor(){}
    ​
        ngAfterViewInit(){
            // Assign the element in template to a variable
          	const container = this.container.nativeElement;
    ​		
    		// GridLayout has static functions setRow and setColumn.
    		// Pass in your element to these static functions and they will attach to the closest parent gridlayout
            GridLayout.setRow(container, 0);
            GridLayout.setColumn(container, 1);
            }
        }
    }
    
    		
            </code>
          </pre>
        </div>
      </li>
        
    </ul>