Rate this docs

Angular Bootstrap textarea

Angular Textarea - Bootstrap 4 & Material Design

Angular Bootstrap textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections and forums.

Textareas don't have to be boring. They can be enhanced with colors, shadows or rounded corners.

Examples of Angular Bootstrap textarea use:

  • Comment section
  • Form
  • Forums

See the following Angular Bootstrap textarea examples:


Material textarea


        <!--Basic textarea-->
<div class="md-form">
  <textarea type="text" id="form7" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form7">Basic textarea</label>
</div>

<!--Textarea with icon prefix-->
<div class="md-form">
  <i class="fa fa-pencil prefix"></i>
  <textarea type="text" id="form8" class="md-textarea form-control" mdbInputDirective></textarea>
  <label for="form8">Icon Prefix</label>
</div>
      

Auto resizing textarea


<div class="md-form">
  <textarea type="text" id="form7" class="md-textarea md-textarea-auto form-control" mdbInputDirective></textarea>
  <label for="form7">Auto resizing textarea</label>
</div>
      

Textarea within forms MDB Pro component

Info notification

MDB has many forms to use together with textarea. Take a look here to know all the possibilities.

Contact Us

Contact Us


        <!-- Section: form gradient -->
        <section class="form-gradient mb-5">

          <!--Form with header-->
          <mdb-card>

            <!--Header-->
            <div class="header peach-gradient">

              <div class="row d-flex justify-content-center">
                <h3 class="white-text mb-0 py-5 font-weight-bold">Contact Us</h3>
              </div>

            </div>
            <!--Header-->

            <mdb-card-body class="mx-4">

              <div class="md-form">
                <i class="fa fa-user prefix grey-text"></i>
                <input type="text" id="form104" class="form-control" mdbInputDirective>
                <label for="form104">Your name</label>
              </div>

              <div class="md-form">
                <i class="fa fa-envelope prefix grey-text"></i>
                <input type="text" id="form105" class="form-control" mdbInputDirective>
                <label for="form105">Your email</label>
              </div>

              <div class="md-form">
                <i class="fa fa-tag prefix grey-text"></i>
                <input type="text" id="form106" class="form-control" mdbInputDirective>
                <label for="form106">Subject</label>
              </div>

              <div class="md-form">
                <i class="fa fa-pencil prefix grey-text"></i>
                <textarea type="text" id="form107" class="md-textarea form-control" rows="5" mdbInputDirective></textarea>
                <label for="form107">Your message</label>
              </div>


              <!--Grid row-->
              <div class="row d-flex align-items-center mb-3 mt-4">

                <!--Grid column-->
                <div class="col-md-12">
                  <div class="text-center">
                    <button type="button" mdbBtn color="grey" rounded="true" class="z-depth-1a">Send</button>
                  </div>
                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->
            </mdb-card-body>

          </mdb-card>
          <!--/Form with header-->

        </section>
        <!-- Section: form gradient -->
        <!-- Section: form dark -->
        <section class="form-dark mb-5">

          <!--Form without header-->
          <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">
            <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">

              <!--Header-->
              <div class="text-center">
                <h3 class="white-text mb-5 mt-4 font-weight-bold text-uppercase">
                  <strong>Contact</strong>
                  <a class="green-text font-weight-bold">
                    <strong> Us</strong>
                  </a>
                </h3>
              </div>

              <div class="md-form">
                <input type="text" id="form100" class="form-control" mdbInputDirective>
                <label for="form100">Your name</label>
              </div>

              <div class="md-form">
                <input type="text" id="form101" class="form-control" mdbInputDirective>
                <label for="form101">Your email</label>
              </div>

              <div class="md-form">
                <input type="text" id="form102" class="form-control" mdbInputDirective>
                <label for="form102">Subject</label>
              </div>

              <div class="md-form">
                <textarea type="text" id="form103" class="md-textarea form-control" rows="5" mdbInputDirective></textarea>
                <label for="form103">Your message</label>
              </div>

              <!--Grid row-->
              <div class="row d-flex align-items-center">

                <!--Grid column-->
                <div class="text-center col-md-12 mt-3 mb-2">
                  <button type="button" mdbBtn color="success" rounded="true" block="true" class="z-depth-1">Send</button>
                </div>
                <!--Grid column-->
              </div>
              <!--Grid row-->

            </div>
          </div>
          <!--/Form without header-->

        </section>
        <!-- Section: form dark -->
      

        .form-gradient .header {
        border-top-left-radius: .3rem;
        border-top-right-radius: .3rem; }

        .form-gradient input[type=text]:focus:not([readonly]) {
        border-bottom: 1px solid #fd9267;
        box-shadow: 0 1px 0 0 #fd9267; }

        .form-gradient input[type=text]:focus:not([readonly]) + label {
        color: #4f4f4f; }

        .form-gradient textarea.md-textarea:focus:not([readonly]) {
        border-bottom: 1px solid #fd9267;
        box-shadow: 0 1px 0 0 #fd9267; }


        .form-dark .md-form label {
        color: #fff; }

        .form-dark input[type=text]:focus:not([readonly]) {
        border-bottom: 1px solid #00C851;
        -webkit-box-shadow: 0 1px 0 0 #00C851;
        box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=text]:focus:not([readonly]) + label {
        color: #fff; }

        .form-dark textarea.md-textarea:focus:not([readonly]) {
        border-bottom: 1px solid #00C851;
        box-shadow: 0 1px 0 0 #00C851;
        color: #fff; }

        .form-dark textarea.md-textarea {
        color: #fff;
        }

        .form-dark .form-control, .form-dark .form-control:focus {
        color: #fff;
        }
      

Angular Time Picker - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of textarea component.


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 Textarea:
// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'

Angular Select - examples & customization


Material textarea with colorful border


        <!--Material textarea-->
        <div class="md-form mb-4 pink-textarea active-pink-textarea">
          <textarea type="text" id="form18" class="md-textarea form-control" mdbInputDirective></textarea>
          <label for="form18">Material textarea colorful on :focus state</label>
        </div>

        <!--Material textarea-->
        <div class="md-form amber-textarea active-amber-textarea">
          <textarea type="text" id="form19" class="md-textarea form-control" mdbInputDirective></textarea>
          <label for="form19">Material textarea colorful on :focus state</label>
        </div>
        <!--Basic textarea-->
        <div class="md-form mb-4 pink-textarea active-pink-textarea-2">
          <textarea type="text" id="form17" class="md-textarea form-control" mdbInputDirective></textarea>
          <label for="form17">Material textarea always colorful</label>
        </div>

        <!--Basic textarea-->
        <div class="md-form amber-textarea active-amber-textarea-2">
          <textarea type="text" id="form16" class="md-textarea form-control" mdbInputDirective></textarea>
          <label for="form16">Material textarea always colorful</label>
        </div>

      

        .pink-textarea textarea.md-textarea:focus:not([readonly]) {
        border-bottom: 1px solid #f48fb1;
        box-shadow: 0 1px 0 0 #f48fb1;
        }
        .active-pink-textarea.md-form label.active {
        color: #f48fb1;
        }

        .amber-textarea textarea.md-textarea:focus:not([readonly]) {
        border-bottom: 1px solid #ffa000;
        box-shadow: 0 1px 0 0 #ffa000;
        }
        .active-amber-textarea.md-form label.active {
        color: #ffa000;
        }


        .active-pink-textarea-2 textarea.md-textarea {
        border-bottom: 1px solid #f48fb1;
        box-shadow: 0 1px 0 0 #f48fb1;
        }
        .active-pink-textarea-2.md-form label.active {
        color: #f48fb1;
        }
        .active-pink-textarea-2.md-form label {
        color: #f48fb1;
        }


        .active-amber-textarea-2 textarea.md-textarea {
        border-bottom: 1px solid #ffa000;
        box-shadow: 0 1px 0 0 #ffa000;
        }
        .active-amber-textarea-2.md-form label.active {
        color: #ffa000;
        }
        .active-amber-textarea-2.md-form label {
        color: #ffa000;
        }