We are going to use WordsAPI & Ionic 4 to build a simple App where the user can get the definition of an English word

Access to the API is provided by RapidAPI. You’ll need a valid RapidAPI account to connect. You can signup to free basic plan here

Create a new App using the command below

ionic start mDictionaryp blank --type=angular 1 2 3 ionic start mDictionaryp blank -- type = angular

Now make it your working directory

cd ./mDictionaryp 1 2 3 cd . / mDictionaryp

We are going to use the HttpClient to connect WordsAPI.So Open and edit ‘src/app/app.module.ts’ then add this import.

import { HttpClientModule } from '@angular/common/http'; 1 2 3 import { HttpClientModule } from '@angular/common/http' ;

Then register it to ‘@NgModule’ imports.

imports: [ BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule], 1 2 3 4 5 6 7 imports : [ BrowserModule , HttpClientModule , IonicModule . forRoot ( ) , AppRoutingModule ] ,

Let’s add a service by running the command below

ionic g service services/word 1 2 3 ionic g service services / word

This service will be used to get the required word definition using WordsAPI as per the code below

import { Injectable } from '@angular/core'; import { HttpClient,HttpHeaders } from '@angular/common/http'; const httpOptions = { headers: new HttpHeaders({ 'X-Mashape-Key': '<YOUR_KEY>', 'Accept': 'application/json' }) }; @Injectable({ providedIn: 'root' }) export class WordService { wordAPIUrl: string = 'https://wordsapiv1.p.mashape.com/words/'; constructor(private http: HttpClient) { } getWordDef(word:string) { return new Promise(resolve => { this.http.get(this.wordAPIUrl+word,httpOptions).subscribe(data => { resolve(data); }, err => { console.log(err); }); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 import { Injectable } from '@angular/core' ; import { HttpClient , HttpHeaders } from '@angular/common/http' ; const httpOptions = { headers : new HttpHeaders ( { 'X-Mashape-Key' : '<YOUR_KEY>' , 'Accept' : 'application/json' } ) } ; @ Injectable ( { providedIn : 'root' } ) export class WordService { wordAPIUrl : string = 'https://wordsapiv1.p.mashape.com/words/' ; constructor ( private http: HttpClient ) { } getWordDef ( word : string ) { return new Promise ( resolve = > { this . http . get ( this . wordAPIUrl + word , httpOptions ) . subscribe ( data = > { resolve ( data ) ; } , err = > { console . log ( err ) ; } ) ; } ) ; } }

You will need your RapidAPI Credentials Key which you will find in your RapidAPI dashboard

let’s update src/app/home/home.page.html to the following

<ion-header> <ion-toolbar> <ion-title> Ionic Blank </ion-title> </ion-toolbar> </ion-header> <ion-content padding> Welcome to The Ionic Dictionary <ion-input [(ngModel)]="myWord" placeholder="Enter a word" ></ion-input> <ion-button shape="round" color="primary" fill="outline" (click)="getWordDef()" >Get the Def</ion-button> <ion-textarea [(ngModel)]="myWordDef"></ion-textarea> </ion-content> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ion-header> <ion-toolbar> <ion-title> Ionic Blank </ion-title> </ion-toolbar> </ion-header> <ion-content padding > Welcome to The Ionic Dictionary <ion-input [ ( ngModel ) ] = "myWord" placeholder = "Enter a word" > </ion-input> <ion-button shape = "round" color = "primary" fill = "outline" ( click ) = "getWordDef()" > Get the Def </ion-button> <ion-textarea [ ( ngModel ) ] = "myWordDef" > </ion-textarea> </ion-content>

Now let’s modify src/app/home/home.page.ts to the following:

import { Component } from '@angular/core'; import { WordService } from '../services/word.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { myWord:string; myWordDef:string; constructor(private wordService: WordService){ } getWordDef(){ console.log(this.myWord); this.wordService.getWordDef(this.myWord) .then((response) => { console.log(response); console.log(response.results[0].definition); this.myWordDef=response.results[0].definition; }).catch((err) => { console.warn(err); });; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 import { Component } from '@angular/core' ; import { WordService } from '../services/word.service' ; @ Component ( { selector : 'app-home' , templateUrl : 'home.page.html' , styleUrls : [ 'home.page.scss' ] , } ) export class HomePage { myWord : string ; myWordDef : string ; constructor ( private wordService: WordService ) { } getWordDef ( ) { console . log ( this . myWord ) ; this . wordService . getWordDef ( this . myWord ) . then ( ( response ) = > { console . log ( response ) ; console . log ( response . results [ 0 ] . definition ) ; this . myWordDef = response . results [ 0 ] . definition ; } ) . catch ( ( err ) = > { console . warn ( err ) ; } ) ; ; } }

Run the App using the command below

ionic serve 1 2 3 ionic serve

Try it and will get the screen below 🙂 . Check the code on GitHub