Morioh
Login
Iñigo Martínez

Iñigo Martínez

1 year ago

Cómo instalar Material Theme en Angular

En este tutorial, le mostraremos cómo instalar Material Theme en Angular 14. Material Theme es una poderosa biblioteca de componentes y estilos preconstruidos que pueden simplificar drásticamente el proceso de creación de aplicaciones web hermosas y receptivas. Luego, lo guiaremos a través de los pasos necesarios para instalar Material Theme en su aplicación Angular y configurar algunas de sus funciones principales. 

Siga los siguientes pasos para instalar y usar el tema material en angular 14:

  • Paso 1: crear una nueva aplicación angular
  • Paso 2: instalar Material Design
  • Paso 3: importar CSS
  • Paso 4: importar bibliotecas de diseño de materiales
  • Paso 5: Ejecute la aplicación Angular

Paso 1: crear una nueva aplicación angular

En primer lugar, abra la terminal y ejecute el siguiente comando en la línea de comando para crear una nueva aplicación angular:

ng new my-app

Paso 2: Instalar Material Design

Luego ejecute el siguiente comando en la línea de comandos para instalar Material Design:

ng add @angular/material

Paso 3: Importar CSS

 Importe el diseño css en el archivo style.css. Así que abra el archivo style.css e importe el siguiente css en él:

/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  
.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}
  
.example-full-width {
  width: 100%;
}

Paso 4: Importar bibliotecas de diseño de materiales

Ahora, importe bibliotecas de diseño de materiales en app.module.ts:

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

Después de eso, agregue el siguiente código en el archivo app.component.html :

<h1>Angular 14 Install Material Design Example</h1>
   
<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Name:</mat-label>
    <input matInput placeholder="Ex. Hardik" value="Hardik">
  </mat-form-field>
  
  <mat-form-field class="example-full-width">
    <mat-label>Address:</mat-label>
    <textarea matInput placeholder="Ex. 204, Sarvo, India"></textarea>
  </mat-form-field>
  
  <button mat-raised-button color="primary">Submit!</button>
</form>

Paso 5: Ejecute la aplicación Angular

Finalmente, ejecute el siguiente comando en la línea de comando para iniciar la aplicación angular:

ng serve

¡Feliz codificación!

1.45 GEEK