Here, i will show you how to works angular 10 material card example. if you want to see example of angular 10 mat card material then you are a right place. step by step explain angular 10 mat-card example. i would like to show you mat card angular 10 material examples.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications for creating card, badge, forms, steps, menu etc. In this example we will learn how to create step by step form in angular app using material card.

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new newMat

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let’s add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Import Material Card Module

Here, we will simply import MatCardModule, MatButtonModule and BrowserAnimationsModule module for creating very simple example. so let’s import on module.ts file.

src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

#angular #javascript #web-development