> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/access-frontend-components.md).

# Access FrontEnd components

You can have access to any Angular component, even if you don't know the specific type of that component, and access the available properties or methods.\
This can be achieved using Angular's `ViewChild`.

For example, if you want to access the button component directly, you can do it by adding the [<mark style="color:red;">ViewChild</mark> ](https://angular.io/api/core/ViewChild)and the unique reference.

**.html file**

```html
<wm-button #button1 id="button1" (click)="clickHandler($event)" [model]="model.button1" class="button1">
</wm-button>
```

**.ts file**

```typescript
@ViewChild("button1")
button1: ButtonComponent;

clickHandler(event: any): void {
   this.button1.text == "test" ? this.doSomething() : this.doSomethingElse();
}
```

In the previous example, we are using the **#button1** template variable added in the wm-button element to access it.

We can also access external libraries components to update or validate a value and even use the `ViewChild` without type, depending on what you want to do.

**.html file**

```html
<kendo-textbox #txtbox1>
</kendo-textbox>
```

**.ts file**

```typescript
@ViewChild("txtbox1")
txtbox1: any;
```