Search results

Customize input and anchor elements in Angular Button component

20 Apr 2021 / 1 minute to read

You can customize the appearance of the input and anchor elements using predefined styles through the class property. In the following code snippet, the input element is customized as a link button by setting the e-btn e-link class, and the anchor element is customized as a primary button by setting the e-btn e-primary class.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template:  `<div>
                    <input type="button" id="inputbtn" value="Input Button" class="e-btn e-link">
                </div><br>
                <div>
                    <a id="anchorbtn" class="e-btn e-primary" href="#">Google</a>
                </div>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);