¿Cómo usar <mat-divider> en material angular?

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. La etiqueta <mat-divider> se usa para separar dos secciones o contenido con una línea horizontal.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

  • Primero, instale el material angular usando el comando mencionado anteriormente.
  • Después de completar la instalación, importe ‘MatDividerModule’ desde ‘@angular/material/divider’ en el archivo app.module.ts.
  • Después de importar el ‘MatDividerModule’ necesitamos usar la etiqueta <mat-divider>.
  • Cuando usamos <mat-divider>, se representa una línea gris horizontal en la pantalla.
  • El objetivo principal de esta etiqueta es separar cualquier bloque de dos, div o cualquier sección.
  • Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Estructura del proyecto:

Implementación de código:

aplicación.módulo.ts: 

Javascript

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

aplicación.componente.html: 

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
  
<mat-divider> </mat-divider>
  
<h5>One stop Solution for all CS subjects</h5>
  
<mat-divider> </mat-divider>
  
  
<p>
    The above horizontal line is displayed 
    due to the presence of mat-divider tag.
</p>

Producción:

Publicación traducida automáticamente

Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *