How to display data obtained from an API to Angular Material Card ?
Last Updated :
07 Dec, 2023
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
< 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 >
|
Javascript
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() {
(result) => {
this .gfg = result
console.log( this .gfg)
}
)
}
}
|
Javascript
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 { }
|
Output:
Example 2: In this example, we will call the API using the buttons of the material card and then display the data on the card.
HTML
< div style = "width: 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:green;
color:white"
(click)="display()"
type = "button" >
Call API
</ button >
</ mat-card-actions >
</ mat-card >
</ div >
|
Javascript
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 {
gfg: any
constructor(private http: HttpClient) { }
display() {
(result) => {
this .gfg = result
console.log( this .gfg)
return result
}
)
}
}
|
Javascript
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 { }
|
Output:
Share your thoughts in the comments
Please Login to comment...