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 ViewChild and the unique reference.

.html file

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

.ts file

@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

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

.ts file

@ViewChild("txtbox1")
txtbox1: any;