Use Amexio With Angular 4 In 5 Minutes [Bootstrap 4 Compatible]

4

Amexio (Angular MetaMagic Extensions) is a rich set of Angular 4 components powered by Bootstrap 4. Like Bootstrap, you can also start using Amexio with Angular 4 in a quick time.

Getting Started – Amexio With Angular 4

Amexio is a set of Angular extensions with following features.

  • 80+ UI Components
  • Charts, Maps and Dashboards
  • Powered by Bootstrap 4
  • Themes 5 Material design
  • Themes 8 Bootstrap
  • Responsive design
  • And many more!

Also, they provide module import for using components, charts, maps, dashboard, etc in your app.

1. Installation of Amexio in Angular 4

Note: Just make sure that you’ve the latest version of NodeJs, NPM and Angular CLI installed.

For Bootstrap 4

npm install amexio-ng-extensions --save

For Bootstrap 3

npm install amexio-ng-extensions@1.0.43 --save

1.1 Installing Dependencies (Required)

Let’s include the respective JS & CSS in your app.

Note: if you are using Angular CLI add it in .angular-cli.json. If not using cli then simply add it to the index.html head.

Amexio Installing dependecies

Facing issues while installing dependencies, have a visit on installing dependencies.

Now, let’s import in your app module.

//Import Browser module
import { BrowserModule } from '@angular/platform-browser';
//Import Forms module
import { NgModule,FormsModule } from '@angular/core';
//Import app component
import { AppComponent } from './app.component';
// Import your library
import { AmexioWidgetModule,CommonHttpService } from 'amexio-ng-extensions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AmexioWidgetModule,
    FormsModule
  ],
  providers: [CommonHttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

That’s it, you can start using Amexio components in your Angular 4 app.

2. Usage of Amexio Input Components

You can start using input components by using simple HTML configurations.

2.1 Basic Amexio Input Example

It’s basic input example with placeholder.

<amexio-text-input [fieldLabel]="'Name'" name ="name"
                   [placeholder]="'Enter name'"
                   [iconFeedBack]="true">
</amexio-text-input>

2.2 Amexio Input with validations Example

This is an basic input example with validations.

<amexio-text-input  [fieldLabel]="'Name'" name ="name"
                    [placeholder]="'Enter name'"
                    [allowBlank]="false" [errorMsg] ="'Please enter last name'"
                    [minLength]="1" [minErrorMsg]="'Minimum 1 char required'"
                    [maxLength]="10"  [maxErrorMsg]="'Maximum 10 char allowed'"
                    [iconFeedBack]="true"  [enablePopOver]="true" [popoverPlacement]="'bottom'">
</amexio-text-input>

Here we go! It’s like a cup of coffee to implement these input components using Amexio with Angular 4.

Also, you can try number of other options by using list of text input flavors.

2.3 Usage of Amexio Buttons

Furthermore, you can also start using buttons using Amexio with Angular 4.

//Secondary button
<amexio-btn [label]="'Secondary'" [type]="'secondary'" [tooltipMessage]="'Secondary Button'"></amexio-btn>
//Primary button
<amexio-btn [label]="'Primary'" [type]="'primary'" [tooltipMessage]="'Primary Button'"></amexio-btn>

Moreover, you can play with many Amexio components like Dropdowns, DataGrid, Forms, Panels, and many more.

Leave a Reply

4 Comments on "Use Amexio With Angular 4 In 5 Minutes [Bootstrap 4 Compatible]"

avatar
  Subscribe  
newest oldest most voted
Notify of
sagar jadhav
Guest

Good Article…..

Pawan
Guest

Nice
Really nice explained

Sagar
Guest

Please can u share similar article with using latest version of amexio-ng-extensions with angular 5 and how to use of amexio themes…… thx