# 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;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/access-frontend-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.