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">
                      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

// 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;">
                      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

// 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: