Custom Design for HTML Button control.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:ej.core.js

• module:ej.button.js

{:#members:contenttype}

Specifies the contentType of the Button. See below to know available ContentType

• ej.ContentType.TextOnly

{% highlight html %}

<input type="button" ej-button id="button" [contentType]="contentType" [prefixIcon]="prefixIcon" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; prefixIcon: string; constructor() { this.contentType = ej.ContentType.ImageOnly; this.prefixIcon = "e-icon e-handup"; } }

{% endhighlight %}

{:#members:cssclass}

Sets the root CSS class for Button theme, which is used customize.

• ""

{% highlight html %}

<input type="button" ej-button id="button" [cssClass]="customCss" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss: string; constructor() { this.customCss = "gradient-lime"; } }

{% endhighlight %}

{:#members:enabled}

Specifies the button control state.

• true

{% highlight html %}

<input type="button" ej-button id="button" [enabled]="false" />

{% endhighlight %}

{:#members:enablertl}

Specify the Right to Left direction to button

• false

{% highlight html %}

<input type="button" ej-button id="button" [enableRTL]="true" />

{% endhighlight %}

{:#members:height}

Specifies the height of the Button.

• 28

{% highlight html %}

<input type="button" ej-button id="button" [height]="height" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { height: string; constructor() { this.height = "30px"; } }

{% endhighlight %}

{:#members:htmlattributes}

It allows to define the characteristics of the Button control. It will helps to extend the capability of an HTML element.

• {}

{% highlight html %}

<input type="button" ej-button id="button" [htmlAttributes]="htmlAttributes" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { htmlAttributes: Object; constructor() { this.htmlAttributes = {disabled:"disabled"}; } }

{% endhighlight %}

{:#members:imageposition}

Specifies the image position of the Button. This image position is applicable only with the textandimage contentType property. The images can be positioned in both imageLeft and imageRight options. See below to know about available ImagePosition

• ej.ImagePosition.ImageLeft

{% highlight html %}

<input type="button" ej-button id="button" [contentType]="contentType" [imagePosition]="imagePosition" [prefixIcon]="prefixIcon" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { prefixIcon: string; imagePosition: any; contentType: any; constructor() { this.prefixIcon = "e-icon e-handup"; this.imagePosition = ej.ImagePosition.ImageRight; this.contentType = ej.ContentType.TextAndImage; } }

{% endhighlight %}

{:#members:prefixicon}

Specifies the primary icon for Button. This icon will be displayed from the left margin of the button.

N> This is applicable for the content type's imageonly, textandimage, imagetextimage and imageboth.

• null

{% highlight html %}

<input type="button" ej-button id="button" [contentType]="contentType" [prefixIcon]="prefixIcon" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { prefixIcon: string; imagePosition: any; contentType: any; constructor() { this.prefixIcon = "e-icon e-handup"; this.contentType = "imageonly"; } }

{% endhighlight %}

{:#members:repeatbutton}

Convert the button as repeat button. It raises the 'Click' event repeatedly from the it is pressed until it is released.

• false

{% highlight html %}

<input type="button" ej-button id="button" [repeatButton]="true" />

{% endhighlight %}

{:#members:showroundedcorner}

Displays the Button with rounded corners.

• false

{% highlight html %}

<input type="button" ej-button id="button" [showRoundedCorner]="true" />

{% endhighlight %}

{:#members:size}

Specifies the size of the Button. See below to know available ButtonSize

• ej.ButtonSize.Normal

{% highlight html %}

<input type="button" ej-button id="button" [size]="size" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { size: any; constructor() { this.size = ej.ButtonSize.Mini; } }

{% endhighlight %}

{:#members:suffixicon}

Specifies the secondary icon for Button. This icon will be displayed from the right margin of the button.

N> This is applicable for the content type's imagetextimage and imageboth.

• null

{% highlight html %}

<input type="button" ej-button id="button" [contentType]="contentType" [suffixIcon]="suffixIcon" [prefixIcon]="prefixIcon" [text]="text" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; suffixIcon: string; prefixIcon: string; text: string; constructor() { this.contentType = "imageboth"; this.suffixIcon = "e-icon e-file-html"; this.prefixIcon = "e-icon e-search"; this.text = "FileSearch"; } }

{% endhighlight %}

{:#members:text}

Specifies the text content for Button.

• null

{% highlight html %}

<input type="button" ej-button id="button" [text]="text" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { text: string; constructor() { this.text = "Hello Word"; } }

{% endhighlight %}

{:#members:timeinterval}

Specified the time interval between two consecutive 'click' event on the button.

N> This is applicable for while the button in repeat button mode.

• "150"

{% highlight html %}

<input type="button" ej-button id="button" [repeatButton]="true" [timeInterval]="timeInterval" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { timeInterval: number; constructor() { this.timeInterval = 100; } }

{% endhighlight %}

{:#members:type}

Specifies the Type of the Button. See below to know available ButtonType

• ej.ButtonType.Submit

{% highlight html %}

<input type="button" ej-button id="button" [type]="type" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { type: any; constructor() { this.type = ej.ButtonType.Submit; } }

{% endhighlight %}

{:#members:width}

Specifies the width of the Button.

• "100px"

{% highlight html %}

<input type="button" ej-button id="button" [width]="width" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { width: any; constructor() { this.width = "150px"; } }

{% endhighlight %}

{:#methods:destroy}

destroy the button widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button buttonObj.destroy(); // destroy the button

{% endhighlight %}

{:#methods:disable}

To disable the button

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button buttonObj.disable(); // disable the button

{% endhighlight %}

{:#methods:enable}

To enable the button

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button buttonObj.enable(); // enable the button

{% endhighlight %}

{:#events:ejclick}

Fires when Button control is clicked successfully.Consider the scenario to perform any validation,modification of content or any other operations click on button,we can make use of this click event to achieve the scenario.

{% highlight html %}

<input type="button" ej-button id="button1" value="Button" (ejclick)="onClick($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onClick(e: any){ // Write a code block to perform operation while click on button. }

}

{% endhighlight %}

{:#events:create}

Fires after Button control is created.If the user want to perform any operation after the button control creation then the user can make use of this create event.

{% highlight html %}

<input type="button" ej-button id="button1" value="Button" (create)="onCreate($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onCreate(e: any){ // Write a code block to perform operation after creating the button. }

}

{% endhighlight %}

{:#events:destroy}

Fires when the button is destroyed successfully.If the user want to perform any operation after the destroy button control then the user can make use of this destroy event.

{% highlight html %}

<input type="button" ej-button id="button1" value="Button" (destroy)="onDestroy($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } onDestroy(e: any){ // Write a code block to perform operation after destroy the button. }

}

{% endhighlight %}