Componente angular MDBootstrap Textarea

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Textarea Component en Angular MDBootstrap.

El componente Textarea se usa para crear un campo en el que el usuario ingresará texto en un gran volumen.

Sintaxis:

<div class="md-form">
    <mdb-icon fab icon="angular" 
                  class="prefix">
    </mdb-icon>
    <textarea type="text" 
              class="md-textarea form-control" mdbInput>
    </textarea>
    <label>Textarea</label>
</div>

Enfoque :

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Textarea en Angular MDBootstrap.

<div id="gfg">
    <h1>GeeksforGeeks</h1>
    <h4>
        Angular MDBootstrap Textarea Component
    </h4>
    <br />
    <div class="md-form">
        <mdb-icon fab icon="angular" 
                  class="prefix">
        </mdb-icon>
        <textarea type="text" 
                  class="md-textarea form-control" mdbInput>
        </textarea>
        <label>Textarea Component</label>
    </div>
</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

 

Ejemplo 2: En este ejemplo, sabremos cómo cambiar automáticamente el tamaño del área de texto en Angular MDBootstrap.

<div id="gfg">
    <h1>GeeksforGeeks</h1>
    <h4>
        Angular MDBootstrap Textarea Component
    </h4>
    <br />
        <div class="md-form">
            <mdb-icon fab icon="angular" class="prefix"></mdb-icon>
            <textarea type="text" 
                class="md-textarea md-textarea-auto form-control"
                      mdbInput>
            </textarea>
            <label>Textarea Component</label>
        </div>
</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

 

Referencia: https://mdbootstrap.com/docs/angular/forms/textarea/