角材料基本卡部分

Angular Material是由 Google 开发的 UI 组件库，以便 Angular 开发人员可以以结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以极大地提高最终用户的用户体验，从而为我们的应用程序赢得人气。该库包含现代即用型元素，可以直接使用最少或无需额外代码。

是一个内容容器，可用于在单个主题的上下文中插入媒体、文本和操作。设计卡片的基本要求只是一个 元素，其中包含一些内容，将用于构建简单的卡片。

句法：

 Content 

这个元素有开始标签，后跟内容或一些代码，并以结束标签结束。 Angular Material 增加了可与 元素一起使用的预设部分的数量，如下所示：

Element Name	Description of the Element
	Title of the respective card
	The subtitle of the respective card
	All the data and information which is the body of the card needs to be written in this section.
	This tag is used to mention all the events like submit, cancel and etc to be written in the card.
	It is used to mention all the details on the header of the card like title, subtitle etc.
	This section is anchored to the bottom of the card., that contains the copyright symbol with year, company name, etc.

上述元素主要用于预先设置样式的内容容器，而不是使用任何其他 API。但是， 的 align 属性主要用于将动作定位在容器的“开始”或“结束”。

安装语法：

为了在 Angular Material 中使用 Basic Card 部分，我们必须在本地机器上安装 Angular CLI，这将有助于添加和配置 Angular 材质库。满足所需条件后，在 Angular CLI 上键入以下命令：

ng add @angular/material

有关详细的安装过程，请参阅将 Angular 材质组件添加到 Angular 应用程序一文。

项目结构：

安装成功后，项目结构如下：

示例：下面的示例说明了 Angular Material Card 的实现。

app.module.ts

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 {}

app.component.css

@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;
}

app.component.html

    
        GeeksforGeeks
         
            One stop solution for all CS Subjects 
        
    
    
        

            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.
        
  
    
    
         
            LIKE 
        
        
            SHARE 
        
    

app.component.ts

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

输出：

参考： https ://material.angular.io/components/card/overview#basic-card-sections