## Element References

You can use Angular Template reference variables ( #var ) to create references to Wijmo web components that can be used in template markup or in TypeScript code.

The following example defines the #flex variable on the wjc-flex-grid components which is used to assign the grid property of the wjc-group-panel component:

    <wjc-group-panel [grid]="flex" placeholder="Drag columns here..." ></wjc-group-panel>
    <wjc-flex-grid #flex [itemsSource]="data"></wjc-flex-grid>

#### Live result:

## Referencing in code

Template reference variables can also be used to manipulate a Wijmo web component in code.

For example, for the wjc-flex-grid component referenced by the #autoSizeGrid template variable:

    <wjc-flex-grid #autoSizeGrid [itemsSource]="data"></wjc-flex-grid>

the reference can be retrieved to the parent component property using Angular @ViewChild decorator:

    @ViewChild('autoSizeGrid') autoSizeGrid: ElementRef;

Note that because wjc-flex-grid is not an Angular component, Angular treats it as a native HTML element, so the reference retrieved into the autoSizeGrid property will be an object of the ElementRef type. To obtain a reference to the web component object itself, you need to use ElementRef.nativeElement property. For example, now we can use it to call FlexGrid.autoSizeColumns method to auto size grid columns:

    ngAfterViewInit() {{ '{' }}
        this.autoSizeGrid.nativeElement.autoSizeColumns();
    }

#### Live result: