We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Submit button confusion between <input> and <button> tag

Thread ID:





132641 Sep 13,2017 02:38 PM UTC Oct 4,2017 05:39 AM UTC Angular 7
Tags: ejToggleButton
Asked On September 13, 2017 02:38 PM UTC


There is no control "ejButton" in the dropdown 'Control' than I selected ejToogleButton but this question points to 'ejButton'.

According to one of my previous question:
if I want to use button with icon I need to use
But this tag does not work in case if I want to use "textonly" button (value property does not work).
In that case I need to use tag:
Why is that ?
I want to use synfusion button in Angular2/4 form and I need button as a button, where button can be disabled if form is not valid.
I cannot do that with tag due to additional elements which syncfusion creates for button presentation.
Is it possible to I create button "textonly" with

Replied On September 13, 2017 02:43 PM UTC

Explanations tag in this question are rendered as a HTML elements.
I do not know hot to fix this in question.



Rajesh Kumar Anburajan [Syncfusion]
Replied On September 14, 2017 12:20 PM UTC

Hi Milos,    
Thanks for contacting Syncfusion Support.    
We have checked with your query. And we would like let you know that you can use any button or input tag to create the EJ Button with contentType  as "textonly".  Please use text property in button tag to display the text in a button.    
If you are using “contentType=textonly” then you can use “text” property.    
<button type="button" contentType="textonly" text="login" ej-button></button>   
If you are using “contentType=imageonly” then you can use “prefixIcon” property.    
<button type="button" contentType="imageonly" prefixIcon="e-icon e-handup" ej-button></button>   
If you are using “contentType=textandimage” then you can use “prefixIcon” and “text” property.    
<button type="button" contentType="textandimage" prefixIcon="e-icon e-handup" text="login" ej-button></button> >   
Please refer the below code in your sample to achieve your requirement.    
<button type="button" contentType="textonly" text="login" ej-button></button>//Here you can use content type textonly   
<button type="button" contentType="imageonly" prefixIcon="e-icon e-handup" ej-button></button>>//Here you can use content type imageonly   
<button type="button" contentType="textandimage" prefixIcon="e-icon e-handup" text="login" ej-button></button> >>//Here you can use content type textandimage   
import { Component, ViewEncapsulation} from '@angular/core';    
    selector: 'ej-app',    
    templateUrl: './app.component.html',    
    export class AppComponent {    
        constructor() {     
In the above code example, we have used <button></button> tag to create the button with contentType and text.   
If issue persists, please revert with more details that will help us to provide the solution.    
Rajesh Kumar A  

Replied On September 15, 2017 09:04 AM UTC

Hi Rajesh,

     Thank you it was all I need, now it is clear.



Replied On September 15, 2017 02:04 PM UTC

Sorry I found another problem with this implementation.

My button is disabled and click works.

It should not work if button is disabled.



Berly Christopher [Syncfusion]
Replied On September 18, 2017 01:14 PM UTC

Hi Milos,  
Sorry for the inconvenience caused.   
We were unable to reproduce the reported issue (“My button is disabled and click works.”) at our end. Please refer the below code example.  
<button type="button" text="login" ej-button id="button1" [enabled]="enabled" (ejclick)="onClick($event)"></button> 
<ej-togglebutton type="checkbox" id="togglebutton1" contenttype="imageonly" [enabled]="enabled" (ejclick)="onClick($event)" defaultprefixicon="e-icon e-mediaplay" activeprefixicon="e-icon e-mediapause"></ej-togglebutton> 
  export class DatePickerComponent { 
          constructor() { 
              alert("click action get triggered"); 
In the above code example, we have disabled the button and toggle button to provide the click action for those items. According to the above code example, while button is in the enabled state at that time click, action get occur. Please get the sample from the following location.   
If issue persists, please revert us with issue reproducing sample that will help us to provide the solution. 
Berly B.C 

Replied On October 3, 2017 06:49 AM UTC

Hi Berly,

          Thank you, that is it.

           My mistake was that I used Angular 2 (click) event instead of Syncfusion button click (ejclick).



Berly Christopher [Syncfusion]
Replied On October 4, 2017 05:39 AM UTC

Hi Milos, 
Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this. 
Berly B.C 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon