Getting started with Typescript Button

1 Aug 20222 minutes to read

You can create a TypeScript application with the help of the given Typescript Getting Started Documentation.

Create an HTML page and add the scripts references in the order, mentioned in the above link Create the Button control as follows.

  • HTML
    • <body>
    <table>
    <tr>
    <td >My First Button</td>
    <td>
    <input id="button" value="button"/>
    </td>
    </tr>
    </table> 
    </body>
  • JS
    • ///<reference path="tsfiles/jquery.d.ts" />
     ///<reference path="tsfiles/ej.web.all.d.ts" />
        module ButtonComponent {
            $(function () {
                var sample = new ej.Button($("#button"));
            });
        }

    Configuring Button Properties

    This section encompasses the details on how you can configure the Typescript Button control in your application and customize it with various properties such as various size, resizing theButton according to your requirement.

    To render the button with required text, size and with rounded corner add the following code example in your TS file.

  • JS
    • /// <reference path="tsfiles/jquery.d.ts" />
       /// <reference path="tsfiles/ej.web.all.d.ts" />
        module ButtonComponent {
            $(function () {
                var sample = new ej.Button($("#button"), { text: "Button", showRoundedCorner: true });
            });
        }

    The following screenshot illustrates the TypeScript Button control with text, size and rounded corner properties.

    Button Control in TypeScript