How to display data obtained from an API to Angular Material Card ?
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" > w3wiki </ 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
// 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) } ) } } |
Javascript
// 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 { } |
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
<!-- app.component.html --> < div style = "width: 70%;" > < mat-card > < mat-card-header > < mat-card-title > < h2 style = "color: green;" > w3wiki </ 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
// 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 { gfg: any constructor(private http: HttpClient) { } display() { this .http.get( 'https://...example.com' ).subscribe( (result) => { this .gfg = result console.log( this .gfg) return result } ) } } |
Javascript
// 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 { } |
Output:
Contact Us