Sección de tarjeta básica de material angular

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por Google para que los desarrolladores de Angular puedan desarrollar aplicaciones modernas de una manera estructurada y receptiva. Al hacer uso de esta biblioteca, podemos aumentar en gran medida la experiencia de usuario de un usuario final, ganando así popularidad para nuestra aplicación. Esta biblioteca contiene elementos modernos listos para usar que se pueden usar directamente con un mínimo de código adicional o sin él.

La <mat-card> es un contenedor para el contenido que se puede usar para insertar los medios, el texto y la acción en contexto para el tema único. El requisito básico para diseñar la tarjeta es solo un elemento <mat-card> que tenga algo de contenido, que se usará para construir tarjetas simples.

Sintaxis:

<mat-card> Content </mat-card>

Este elemento tiene una etiqueta de apertura seguida del contenido o algún código y termina con la etiqueta de cierre. Angular Material facilita la cantidad de secciones preestablecidas que se pueden usar con el elemento <mat-card>, que se proporciona a continuación:

Los elementos anteriores se usan principalmente para contenedores de contenido prediseñados, en lugar de usar API adicionales. Sin embargo, la propiedad de alineación con <mat-card-actions> se usa principalmente para colocar las acciones al ‘inicio’ o al ‘final’ del contenedor.

Sintaxis de instalación:

Para poder usar la Sección de Tarjeta Básica en Angular Material, debemos tener Angular CLI instalado en la máquina local, eso ayudará a agregar y configurar la biblioteca de Angular material. Después de cumplir con la condición requerida, escriba el siguiente comando en Angular CLI:

ng add @angular/material

Consulte el artículo Adición de un componente de material angular a una aplicación angular para conocer el procedimiento de instalación detallado.

Estructura del proyecto:

Después de una instalación exitosa, la estructura del proyecto tendrá el siguiente aspecto:

Ejemplo: El siguiente ejemplo ilustra la implementación de la Tarjeta de material angular.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
  
@NgModule({
  imports: 
  [BrowserModule, 
   FormsModule, 
   MatCardModule, 
   MatButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

@import "~material-icons/iconfont/material-icons.css";
p {
  font-family: "Lato", sans-serif;
  text-align: justify;
}
.example-card {
  max-width: 450px;
  margin: 10px;
}
  
mat-card-subtitle {
  font-size: 18px;
}
  
mat-card-title {
  color: green;
  font-size: 55px;
  justify-content: center;
  display: flex;
}

<mat-card class="example-card">
    <mat-card-header>
        <mat-card-title>GeeksforGeeks</mat-card-title>
        <mat-card-subtitle> 
            One stop solution for all CS Subjects 
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            With the idea of imparting programming 
            knowledge, Mr. Sandeep Jain, an IIT Roorkee 
            alumnus started a dream, GeeksforGeeks. 
            Whether programming excites you or you feel 
            stifled, wondering how to prepare for 
            interview questions or how to ace data 
            structures and algorithms, GeeksforGeeks 
            is a one-stop solution. With every tick of 
            time, we are adding arrows in our quiver.
            From articles on various computer science 
            subjects to programming problems for practice,
            from basic to premium courses, from technologies
            to entrance examinations, we have been building
            ample content with superior quality. In a short
            span, we have built a community of 1 Million+ 
            Geeks around the world, 20,000+ Contributors and
            500+ Campus Ambassador in various colleges across
            the nation. Our success stories include a lot of
            students who benefitted in their placements and 
            landed jobs at tech giants. Our vision is to 
            build a gigantic network of geeks and we are 
            only a fraction of it yet.
        </p>
  
    </mat-card-content>
    <mat-card-actions>
        <button mat-button style=
                "background-color:blue; 
                 color:white"> 
            LIKE 
        </button>
        <button mat-button style=
                "background-color:green; 
                 color:white">
            SHARE 
        </button>
    </mat-card-actions>
</mat-card>

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

Producción:

Referencia: https://material.angular.io/components/card/overview#basic-card-sections