Post
Ask Question

Angular Material: Card Based Interface - Part Two

Recap

In my earlier article on this series, we went through the Angular Material card based interface, and how we can use various types of cards and their layouts. If you have not, then please visit my article at,

  1. Angular Material: Card Based Interface - Part One
How can we use Angular Material Cards for displaying search results?

Let’s consider, I would like to search books based on some keyword and upon searching, all the books are displayed in a card based interface. Now, to implement this, the following approach can be considered:

Use Case – Searching Books based on keyword and displaying them in card interface.
  • User enters keyword for a book search.
  • User is displayedthe  top five books in a card based layout.

Before I get into the details, here is how card interface for the top five books will be shown:

details

Searching books data using REST API

For my use case, I will be using the following REST API.

https://www.googleapis.com/books/v1/volumes?q=SharePoint&maxResults=5

Building Card Interface for our Book Search

For our Book Search Input criteria, I will be using input directives and button provided by Angular Material. And for search results, I will be using large cards.

Now, let's follow the below steps for our interface which will display our information in card format,

  1. Create an index.html by using the following code.
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   
    4. <head>  
    5.     <title>Angular Material Card</title>  
    6.     <meta charset="utf-8">  
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
    8.     <link rel='stylesheet' href='angular-material.min.css'>  
    9.     <style>  
    10.         .book-img {  
    11.             height: 170px;  
    12.             width: 130px;  
    13.         }  
    14.     </style>  
    15. </head>  
    16.   
    17. <body>  
    18.     <div ng-controller="appController" ng-cloak="" ng-app="MyApp">  
    19.         <div layout="column" ng-cloak class="lg-inline-form">  
    20.             <md-content class="md-padding" layout-lg layout="row">  
    21.                 <md-input-container class="md-block md-input-has-value"> <label>Enter Keywords</label> <input ng-model="keyword" md-maxlength="30" required> </md-input-container>  
    22.                 <md-input-container>  
    23.                     <md-button class="md-raised md-primary" ng-click="searchBooks()">Search Top 5 Books</md-button>  
    24.                 </md-input-container>  
    25.             </md-content>  
    26.             <md-content class="md-padding" layout-xs="column" layout="row">  
    27.                 <div flex-xs="" flex-gt-xs="50" layout="column">  
    28.                     <div ng-repeat="book in books">  
    29.                         <md-card>  
    30.                             <md-card-title>  
    31.                                 <md-card-title-text> <span class="md-headline">{{book.volumeInfo.title}}</span> <span class="md-subhead">{{book.volumeInfo.description|limitTo:200}}...</span> </md-card-title-text>  
    32.                                 <md-card-title-media>  
    33.                                     <div class="book-img"> <img data-ng-src="{{book.volumeInfo.imageLinks.thumbnail}}" /> </div>  
    34.                                 </md-card-title-media>  
    35.                             </md-card-title>  
    36.                             <md-card-actions layout="row" layout-align="end center">  
    37.                                 <md-button class="md-raised md-button">Shortlist</md-button>  
    38.                                 <md-button class="md-raised md-primary">Add To Cart</md-button>  
    39.                             </md-card-actions>  
    40.                         </md-card>  
    41.                     </div>  
    42.                 </div>  
    43.             </md-content>  
    44.         </div>  
    45.     </div>  
    46.     <script src='angular.min.js'></script>  
    47.     <script src='angular-animate.min.js'></script>  
    48.     <script src='angular-route.min.js'></script>  
    49.     <script src='angular-aria.min.js'></script>  
    50.     <script src='angular-messages.min.js'></script>  
    51.     <script src='angular-material.min.js'></script>  
    52.     <script src='services.js'></script>  
    53.     <script src='app.js'></script>  
    54. </body>  
    55.   
    56. </html>  
    The above code can be explained here. 
    Input directives and their UI rendering can be seen in the following image.
    Input directives
    Card directives and their UI rendering can be seen here. 
    UI rendering
  2. Create a new app.js and copy the following code to it.
    1. var myapp = angular.module('MyApp', ['ngMaterial', 'bookServices']);  
    2. myapp.controller('appController', function($scope, BookService)   
    3. {  
    4.     $scope.searchBooks = function()   
    5.     {  
    6.         if (($scope.keyword.length) > 0) {  
    7.             BookService.getBooks($scope.keyword).then(function(response) {  
    8.                 $scope.books = response.data.items;  
    9.             });  
    10.         }  
    11.     }  
    12. })  
  3. Create services.js and write this code in it.
    1. var bookServices = angular.module('bookServices', []);  
    2. bookServices.factory('BookService', function($http)   
    3. {  
    4.     var bookapi = {};  
    5.     bookapi.getBooks = function(keyword) {  
    6.         return $http({  
    7.             method: 'get',  
    8.             url: 'https://www.googleapis.com/books/v1/volumes?q=' + keyword + '&maxResults=5'  
    9.         }).success(function(data) {  
    10.             bookapi.books = data;  
    11.         });  
    12.     }  
    13.     return bookapi;  
    14. });  
  4. Open index.html in browser and see how our Angular Material based interface looks.

    search

  5. Now, let’s enter a keyword ‘SharePoint’ and click on button ‘SEARCH TOP 5 BOOKS’. This will execute search API and will present the results in card interface, listing top five books based on the search criteria or keyword entered by user.

    SharePoint

Now, let’s resize the window and see how book search results become responsive. I am using Developer Tools for testing the responsiveness of the search results page.

results

This way, we can have any search results presented. If you are searching for blogs or books or any other content, such elegant interfaces can be used to present search results.


Similar Articles