Header Ads Widget

Ticker

6/recent/ticker-posts

Tamaño automático Angular 10 Textarea

 En este tutorial, aprenderemos cómo ajustar automáticamente el tamaño de un elemento de área de texto en nuestra aplicación Angular 10.

Como requisito previo, debe tener Angular CLI v10 instalado en su máquina de desarrollo.

También puede usar el IDE de Stackblitz en línea si aún no tiene un entorno de desarrollo listo.

Paso 1: inicializar un nuevo proyecto de Angular 10

Comencemos con un nuevo proyecto. Dirígete a una nueva interfaz de línea de comandos y ejecuta el siguiente comando para crear un nuevo proyecto:

$ ng new Angular10TextareaAutosize 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, vaya a la carpeta de su proyecto y ejecute el servidor usando los siguientes comandos:

$ cd Angular10TextareaAutosize
$ ng serve    

Utilice su navegador web y visite la http://localhost:4200/dirección para ver su aplicación en ejecución.

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

Paso 1: instalación @techiediaries/ngx-textarea-autosize

A continuación, abra una nueva interfaz de línea de comandos y navegue hasta la carpeta de su proyecto, luego ejecute el siguiente comando para instalar la @techiediaries/ngx-textarea-autosizebiblioteca desde npm usando el siguiente comando:

$ npm install @techiediaries/ngx-textarea-autosize

A continuación, abra el src/app/app.module.tsarchivo y agregue AutosizeModulela matriz de importaciones de la siguiente manera:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import {AutosizeModule} from '@techiediaries/ngx-textarea-autosize';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, AutosizeModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<textarea autosize>
    This is an example of @techiediaries/ngx-textarea-autosize in Angular 10.
</textarea>

Simplemente agregamos la autosizedirectiva al textareaelemento que le permitirá crecer automáticamente en altura a medida que escribe para adaptarse al contenido.

Publicar un comentario

0 Comentarios