ngx-prettyearth v0.0.4

ngx-prettyearth

Component to show random picture from Google Earth Image Gallery.

Angular component inspired by EarthView & PrettyEarth.

Contents

• Demo
• Preinstall
• Install
• Import
• Use
  • HTML Component
  • TS Component
• Variables
• Services
• Methods
  • Service
  • Component
• Interfaces
• Support
• License

Demo

See demo here

Preinstall

This component depends on apisauce.

npm i apisauce

o

yarn add apisauce

Install

npm i ngx-prettyearth

o

yarn add ngx-prettyearth

Import

Add NgxPrettyearthModule in import of app.module.ts

import { NgxPrettyearthModule } from 'ngx-prettyearth';

...
imports: [..., NgxPrettyearthModule],

Use

HTML Component

<ngx-prettyearth></ngx-prettyearth>

o

<ngx-prettyearth [interval]="1000" (change)="onChange($event)">
  <div class="content">
    <h4>{{ prettyearth?.region }}</h4>
    <h2>{{ prettyearth?.country }}</h2>
  </div>
</ngx-prettyearth>

TS Component

...
  public prettyearth!: IPrettyearth;

  public onChange(event: IPrettyearth) {
    this.prettyearth = event;
  }
...

Can also be used by reference

Variables

Services

If you don't want to use the component and want to build your own component you can use the service by subscribing to it.

This service gives you all the access to the component

constructor(private prettyearthService: NgxPrettyearthService) {
    prettyearthService.prettyearth.subscribe(
      (prettyearth: IPrettyearth): void => {
          ...
      }
    );
}

Methods

Service

async call()

Async method to set image in localStorage & prettyearth.

destroy()

Delete all subscriptions from service & remove image from localStorage.

setInterval(interval: number)

Interval to set random image.

stopInterval()

Destroy a interval subscription.

Component

getRandomPic()

Similar to call() method.

Interfaces

interface IPrettyearth {
  country: string;
  image: string;
  map: string;
  region: string;
}

Support

You can help me 😊 Issues.

License

ngx-prettyearth is available under the MIT license.

☕ Coffee!