Angular Bootstrap Inputs
Angular Inputs - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Angular Bootstrap inputs are special types of fields that are used in order to receive data from the user. Used mostly in a variety of web-based forms.
All of them are created in our beautiful, material design style.
MDB Angular supports the following types of inputs: button, checkbox, email, file, hidden, number, password, radio, range, reset, search, submit, tel, text, and textarea.
Examples
Input field
<div class="md-form">
<input mdbInput type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
Two-way data binding
Look at me:
<div class="md-form">
<input mdbInput type="text" name="text" [(ngModel)]="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
<p>Look at me! {{text}}</p>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'two-way-component',
templateUrl: './two-way.component.html',
styleUrls: ['./two-way.component.scss']
})
export class TwoWayComponent {
text = '';
}
Small input
<div class="md-form form-sm">
<input mdbInput type="text" id="form1" class="form-control form-control-sm">
<label for="form1" class="">Example label</label>
</div>
Icon Prefixes
<div class="md-form">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput type="text" id="form2" class="form-control">
<label for="form2">Example label</label>
</div>
Placeholder
<div class="md-form">
<input mdbInput placeholder="Placeholder" type="text" id="form58" class="form-control">
<label for="form58">Example label</label>
</div>
Prefilling Text Inputs
<div class="md-form">
<input value="John Doe" type="text" id="form6" class="form-control" mdbInput>
<label for="form6">Example label</label>
</div>
Error or Success Messages
Note that
minLength, maxLength defines the minimum and maximum input length.
Also data-error, data-success provides space to enter your custom error or success message.
We can now use [errorMessage] and [successMessage] inputs to add custom messages as
strings or to pass variables defined in your typescript file. Those inputs will only work when data-error
and data-success attributes are not available.
If you do not want to use validation, use [mdbValidation]="false" on the input
element, which should not display the validation status. You can use [validateSuccess]="false" or [validateError]="false"
to disable only one type of message.
<form [formGroup]="validationForm">
<div class="md-form">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input mdbInput mdbValidate formControlName="emailFormEx" minLength="8" maxLength="25" type="email"
class="form-control" id="form9">
<label for="form9">Type your e-mail</label>
<mdb-error *ngIf="emailFormEx.invalid && (emailFormEx.dirty || emailFormEx.touched)">Input invalid</mdb-error>
<mdb-success *ngIf="emailFormEx.valid && (emailFormEx.dirty || emailFormEx.touched)">Input valid</mdb-success>
</div>
<div class="md-form">
<mdb-icon fas icon="lock" class="prefix"></mdb-icon>
<input mdbInput mdbValidate formControlName="passwordFormEx" minLength="10" maxLength="25" type="password"
class="form-control" id="form10">
<label for="form10">Type your password</label>
<mdb-error *ngIf="passwordFormEx.invalid && (passwordFormEx.dirty || passwordFormEx.touched)">Input invalid
</mdb-error>
<mdb-success *ngIf="passwordFormEx.valid && (passwordFormEx.dirty || passwordFormEx.touched)">Input valid
</mdb-success>
</div>
</form>
import { FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
selector: 'error-success-message',
templateUrl: './error-success-message.component.html',
styleUrls: ['./error-success-message.component.scss'],
})
export class ErrorSuccessMessageComponent {
validationForm: FormGroup;
constructor(public fb: FormBuilder) {
this.validationForm = fb.group({
emailFormEx: [null, [Validators.required, Validators.email]],
passwordFormEx: [null, Validators.required],
});
}
get emailFormEx() { return this.validationForm.get('emailFormEx'); }
get passwordFormEx() { return this.validationForm.get('passwordFormEx'); }
}
Disabled input
Add the
disabled boolean attribute on an input to prevent user interactions.
To use
not-allowed cursor, add
.disabled class to the label.
<div class="md-form form-sm">
<input type="text" id="form11" class="form-control" disabled>
<label for="form11" class="disabled">Example label</label>
</div>
Form layouts
Since Bootstrap applies
both display: block and
width: 100% to almost all our form controls, forms will by default stack vertically. Additional
classes
can be used to vary this layout on a per-form basis.
Form groups
The
.form-group class is the easiest way to add some structure to forms. It provides a flexible class that
encourages proper
grouping of labels, controls, optional help text, and form validation messaging. By default, it only applies
margin-bottom, but it picks up additional styles in
.form-inline as needed. Use it with
<fieldset>s,
<div>s, or nearly any other element.
<!-- Material form group -->
<form>
<!-- Material input -->
<div class="md-form form-group mt-5">
<input mdbInput type="text" class="form-control" id="formGroupExampleInputMD" placeholder="Example input">
<label for="formGroupExampleInputMD">Example label</label>
</div>
<!-- Material input -->
<div class="md-form form-group mt-5">
<input mdbInput type="text" class="form-control" id="formGroupExampleInput2MD" placeholder="Another input">
<label for="formGroupExampleInput2MD">Another label</label>
</div>
</form>
<!-- Material form group -->
Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<!-- Material form grid -->
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input mdbInput type="text" class="form-control" placeholder="First name">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input mdbInput type="text" class="form-control" placeholder="Last name">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material form grid -->
Form row
You may also swap
.row for
.form-row, a variation of our standard grid row that overrides the default column gutters for tighter
and more compact
layouts.
<!-- Material form row -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="First name">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material form row -->
<!-- Default form row -->
<form>
<!-- Grd row -->
<div class="form-row">
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInput type="text" class="form-control" placeholder="First name">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInput type="text" class="form-control" placeholder="Last name">
</div>
<!-- Grid column -->
</div>
<!-- Grd row -->
</form>
<!-- Default form row -->
More complex layouts can also be created with the grid system.
<!-- Extended material form grid -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="email" class="form-control" id="inputEmail4MD" placeholder="Email">
<label for="inputEmail4MD">Email</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="Password">
<label for="inputPassword4MD">Password</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St">
<label for="inputAddressMD">Address</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-12">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor">
<label for="inputAddress2MD">Address 2</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="text" class="form-control" id="inputCityMD" placeholder="New York City">
<label for="inputCityMD">City</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="text" class="form-control" id="inputZipMD" placeholder="11206-1117">
<label for="inputZipMD">Zip</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<button type="submit" mdbBtn color="primary">Sign in</button>
</form>
<!-- Extended material form grid -->
<!-- Extended default form grid -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInput type="email" class="form-control" id="inputEmail4" placeholder="Email">
<label for="inputEmail4">Email</label>
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInput type="password" class="form-control" id="inputPassword4" placeholder="Password">
<label for="inputPassword4">Password</label>
</div>
</div>
<!-- Grid row -->
<!-- Default input -->
<div class="form-group">
<input mdbInput type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
<label for="inputAddress">Address</label>
</div>
<!-- Default input -->
<div class="form-group">
<input mdbInput type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
<label for="inputAddress2">Address 2</label>
</div>
<!-- Grid row -->
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInput type="text" class="form-control" id="inputCity" placeholder="New York City">
<label for="inputCity">City</label>
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInput type="text" class="form-control" id="inputZip" placeholder="11206-1117">
<label for="inputZip">Zip</label>
</div>
</div>
<!-- Grid row -->
<button type="submit" mdbBtn color="primary">Sign in</button>
</form>
<!-- Extended default form grid -->
Horizontal form
You can create horizontal forms with the grid by adding the
.row class to form groups and using the
.col-*-* classes to specify the width of your labels and controls. When doing this, be sure to add
.col-form-label to your
<label>s as well so they’re vertically centered with their associated form controls.
At times, you maybe need to use margin or padding utilities to create that perfect alignment you desire. For
example,
we’ve removed the
padding-top on our stacked radio inputs label to better align the text baseline.
<!-- Horizontal material form -->
<form>
<!-- Grid row -->
<div class="form-group row">
<!-- Material input -->
<label for="inputEmail3MD" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input mdbInput type="email" class="form-control" id="inputEmail3MD" placeholder="Email">
</div>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<!-- Material input -->
<label for="inputPassword3MD" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input mdbInput type="password" class="form-control" id="inputPassword3MD" placeholder="Password">
</div>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" mdbBtn color="primary">Sign in</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Horizontal material form -->
<!-- Default horizontal form -->
<form>
<!-- Grid row -->
<div class="form-group row">
<!-- Default input -->
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input mdbInput type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<!-- Default input -->
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input mdbInput type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" mdbBtn color="primary">Sign in</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Default horizontal form -->
Column sizing
As shown in the previous examples, our grid system allows you to place any number of
.cols within a
.row or
.form-row. They’ll split the available width equally between them. You may also pick a subset of your
columns to take
up more or less space, while the remaining
.cols equally split the rest, with specific column classes like
.col-7.
<!-- Material column sizing form -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-7">
<!-- Material input -->
<div class="md-form">
<input mdbInput type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input mdbInput type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input mdbInput type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material column sizing form -->
<!-- Default column sizing form -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-7">
<!-- Default input -->
<input mdbInput type="text" class="form-control" placeholder="City">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInput type="text" class="form-control" placeholder="State">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInput type="text" class="form-control" placeholder="Zip">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Default column sizing form -->
Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes
.col to
.col-auto so that your columns only take up as much space as needed. Put another way, the column sizes
itself based on
the contents.
<!-- Material auto-sizing form -->
<form>
<!-- Grid row -->
<div class="form-row align-items-center">
<!-- Grid column -->
<div class="col-auto">
<!-- Material input -->
<div class="md-form">
<input mdbInput type="text" class="form-control mb-2" id="inlineFormInputMD" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputMD">Name</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<!-- Material input -->
<label class="sr-only" for="inlineFormInputGroupMD">Username</label>
<div class="md-form input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon">@</span>
</div>
<input mdbInput type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupMD" placeholder="Username">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<button type="submit" mdbBtn color="primary" class="mb-0">Submit</button>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material auto-sizing form -->
<!-- Default auto-sizing form -->
<form>
<!-- Grid row -->
<div class="form-row align-items-center">
<!-- Grid column -->
<div class="col-auto">
<!-- Default input -->
<label class="sr-only" for="inlineFormInput">Name</label>
<input mdbInput type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input mdbInput type="text" class="form-control py-0" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<button type="submit" mdbBtn color="primary" class="mt-0">Submit</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Default auto-sizing form -->
Inline forms
Use can usethe
.form-inline class to display a series of labels, form controls, and buttons on a single horizontal
row. Form controls within
inline forms vary slightly from their default states.
- The controls are
display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities. - Controls and input groups receive
width: autoto override the Bootstrap defaultwidth: 100%. - Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with
spacing utilities (as shown below). Lastly, be
sure to always include a
<label> with each form control, even if you need to hide it from non-screenreader visitors with
.sr-only.
<!-- Material inline form -->
<form class="form-inline">
<!-- Material input -->
<div class="md-form">
<input mdbInput type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2MD" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputName2MD">Name</label>
</div>
<!-- Material input -->
<label class="sr-only" for="inlineFormInputGroupUsername2MD">Username</label>
<div class="md-form input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon">@</span>
</div>
<input mdbInput type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupUsername2MD" placeholder="Username">
</div>
<!-- Checkbox -->
<mdb-checkbox mdbInput class="mb-2 mr-sm-2">Remember me</mdb-checkbox>
<button type="submit" mdbBtn color="primary" class="mb-0">Submit</button>
</form>
<!-- Material inline form -->
<!-- Default inline form -->
<form class="form-inline">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input mdbInput type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input mdbInput type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<!-- Checkbox -->
<mdb-checkbox mdbInput class="mb-2 mr-sm-2">Remember me</mdb-checkbox>
<button type="submit" mdbBtn color="primary" class="mt-0">Submit</button>
</form>
<!-- Default inline form -->
Numeric input
Press the Shift key and then the Arrow Up / Arrow Down key to change the input value by + 10 / - 10.
Press the Alt key and then the Arrow Up / Arrow Down key to change the input value by + 0.1 / - 0.1.
The above functionality is possible by adding the mdbInput to the input element.
<div class="md-form">
<input type="number" class="form-control" id="numberInputEx" mdbInput>
<label for="numberInputEx">Number input</label>
</div>
Character counter MDB Pro component
Use a character counter in fields where a character restriction is in place.
Input field
<div class="md-form">
<input id="input_text" class="form-control" type="text" length="10" mdbCharCounter mdbInput>
<label for="input_text">Input text</label>
</div>
Textarea
<div class="md-form">
<textarea class="md-textarea form-control " rows="3" id="input_text" type="text" length="120" mdbCharCounter mdbInput></textarea>
<label for="input_text">Type your text</label>
</div>
Outline inputs - Material 2.0
New Material 2.0 styles of inputs
Input field
<!-- Material outline input -->
<div class="md-form md-outline">
<input type="text" id="form1" class="form-control" mdbInput>
<label for="form1">Example label</label>
</div>
Large outline input
<!-- Large outline input -->
<div class="md-form md-outline form-lg">
<input id="form-lg" class="form-control form-control-lg" type="text" mdbInput>
<label for="form-lg">Example label</label>
</div>
Small outline input
<!-- Small outline input -->
<div class="md-form md-outline form-sm">
<input id="form-sm" class="form-control form-control-sm" type="text" mdbInput>
<label for="form-sm">Example label</label>
</div>
Prefix
<div class="md-form md-outline">
<mdb-icon fas icon="envelope"></mdb-icon>
<input type="text" id="inputIconEx1" class="form-control" mdbInput>
<label for="inputIconEx1">E-mail address</label>
<small id="emailHelp2" class="form-text text-muted">We'll never share your email with anyone.</small>
</div>
Character counter
<!-- Material outline counter input -->
<div class="md-form md-outline">
<input id="input-char-counter1" type="text" length="10" class="form-control" mdbCharCounter mdbInput>
<label for="input-char-counter1">Input text</label>
</div>
Disabled
<!-- Material outline disabled input -->
<div class="md-form md-outline">
<input type="text" id="inputDisabledEx13" class="form-control" disabled mdbInput>
<label for="inputDisabledEx13" class="disabled">Example label</label>
</div>
Validation
<!-- Outline validation input -->
<div class="md-form md-outline">
<input mdbInput mdbValidate name="email" type="email" id="form8" class="form-control" [(ngModel)]="email" #input="ngModel" required pattern="[^ @]*@[^ @]*">
<label for="form2">Email validator</label>
<mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
<mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
</div>
<!-- Outline validation input -->
<div class="md-form md-outline">
<input mdbInput mdbValidate name="input2" type="password" id="form2" class="form-control" [(ngModel)]="minLength" #input2="ngModel" required minlength="3">
<label for="form2">password validator</label>
<mdb-error *ngIf="input2.invalid && (input2.dirty || input2.touched)">Input invalid</mdb-error>
<mdb-success *ngIf="input2.valid && (input2.dirty || input2.touched)">Input valid</mdb-success>
</div>
Textarea
<!--Material textarea-->
<div class="md-form md-outline">
<textarea type="text" id="form75" class="form-control md-textarea" rows="3" mdbInput></textarea>
<label for="form75">Material textarea</label>
</div>
Inputs with background and animated border - Material 2.0
New Material 2.0 styles of inputs
Input field
<!-- Material background input -->
<div class="md-form md-bg">
<input type="text" id="formBg1" class="form-control" mdbInput>
<label for="formBg1">Example label</label>
</div>
Large input with background
<!-- Large background input -->
<div class="md-form md-bg form-lg">
<input id="form-bg-lg" class="form-control form-control-lg" type="text" mdbInput>
<label for="form-bg-lg">Example label</label>
</div>
Small input with background
<!-- Small background input -->
<div class="md-form md-bg form-sm">
<input id="form-bg-sm" class="form-control form-control-sm" type="text" mdbInput>
<label for="form-bg-sm">Example label</label>
</div>
A fix for the default background color of input in the browser
When you use a browser, sometimes you save your e-mail address and the password on the page. On any website where you have a form and you saved your data, Chrome is auto-filling the email and password fields and changes the background color to a pale yellow or blue color.
To avoid this default behavior of the browser, you can use the solution below:
Basic solution
In our basic example, we want to remove the blue background and black text and change it to a transparent background and grey text.
Here you can find a snippet with a working example. It works with outline inputs too.
@-webkit-keyframes autofill {
to {
color: #666;
background: transparent;
}
}
@keyframes autofill {
to {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
animation-name: autofill;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.md-form > input[type]:-webkit-autofill:not(.browser-default):not([type='search']) + label {
transform: translateY(-14px);
}
Angular Inputs - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of inputs components.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Inputs:
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
import { CharCounterModule } from 'ng-uikit-pro-standard';
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md';