How to display data obtained from an API to Angular Material Card ?
Last Updated :
24 Apr, 2025
Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way.
In this article, we will learn How to display data that is obtained from an API to a card of Angular Material.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install Angular material
npm install @angular/material --save
Step 4: Add CSS in src/styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Project Structure
It will look like the following:
Example 1: In this example, we will fetch an API using HTTP, and display the object (its property values) in the card.
HTML
<!-- app.component.html -->
<div class="w-70">
<mat-card>
<mat-card-header>
<mat-card-title>
<h2 style="color: green">
GeeksforGeeks
</h2>
</mat-card-title>
<mat-card-subtitle>
<h2>
How to display data that is obtained
from an api to a card of
angular material?
</h2>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<b>Id: </b>
<p>
{{gfg.id}}
</p>
<b> Title </b>
<p>
{{gfg.title}}
</p>
<b>Body: </b>
<p>
{{gfg.body}}
</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>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
gfg: any
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://...example.com').subscribe(
(result) => {
this.gfg = result
console.log(this.gfg)
}
)
}
}
// 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";
import { HttpClientModule }
from '@angular/common/http';
@NgModule({
imports:
[BrowserModule,
FormsModule,
MatCardModule,
MatButtonModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }