Angular Button Component

The Button component for Angular - configured to show textual content only, or to display a predefined icon, an image, or a custom icon, or yet a combination of textual and image content.

Step 1: Install jqWidgets

Install the jqWidgets library in your Angular project using npm:

npm install jqwidgets-ng --save

Step 2: Add jqx.base.css

To ensure proper styling of the jqxButton component, include the jqWidgets base CSS file in your project. Add the following line to the angular.json file under the styles array:

"styles": [
  "src/styles.css",
  "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css"
]

Step 3: Create a Standalone Component

Angular supports standalone components, a modern and streamlined approach for building Angular applications. This example demonstrates using jqxButton in a standalone component.

Complete Example

Below is an example of a standalone Angular component using jqxButton:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

// app.component.ts
import { Component } from '@angular/core';
import { jqxButtonModule } from 'jqwidgets-ng/jqxbuttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [jqxButtonModule],
  template: `
    <jqxButton
      #button
      [width]="120"
      [height]="40"
      (onClick)="handleClick()"
    >
      Click Me
    </jqxButton>
  `,
  styles: [
    `
      jqxButton {
        margin: 20px;
      }
    `,
  ],
})
export class AppComponent {
  handleClick(): void {
    console.log('Button clicked!');
  }
}

Additional Features

jqxButton provides several features to enhance your buttons:

• Custom Styling: Customize button appearance with properties like width, height, and theme.
• Event Handling: Use the (onClick) event for handling button clicks.
• Disabled State: Set the button to a disabled state using the [disabled] property.
• Integration: Use buttons within forms or as standalone interactive elements.

Event Handling

jqxButton emits the onClick event to handle user interactions. For example:

<jqxButton
  [width]="120"
  [height]="40"
  (onClick)="handleClick()"
>
  Submit
</jqxButton>

In the component class:

handleClick(): void {
  console.log('Submit button clicked!');
}

Conclusion

With this guide, you can seamlessly integrate jqxButton into your Angular applications. Its customizable features and event-handling capabilities make it a versatile choice for interactive interfaces. For more details and advanced usage, visit the jqWidgets documentation.

Button API

API Reference of the jQWidgets Button component for Angular: Button API