@epsidev/ngx-dionisio v0.0.2

Basic Overview

Official Dionisio Angular Library heavily inspired by @angular/fire

Installation

npm i @epsidev/ngx-dionisio --save

Then add HeliosModule into your app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxDionisioModule } from '@epsidev/ngx-dionisio';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxDionisioModule.forRoot({
	    base_url: 'http://localhost:3000',
    })
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage

Import Dionisio Service into your component:

import { Component } from '@angular/core';
import { DionisioService } from '@epsidev/ngx-dionisio';
import { Observable }  from  'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public foos$: Observable<Foo[]> = this.dionisio.collection<Foo>('foo').valueChanges();

  constructor(
    private dionisio: DionisioService,
  ) {}

}

interface Foo {
  id: number;
  text: string;
}

On your template use the $foos Observable with an async pipe

<ul  class="list-group"  *ngIf="foos$ | async as foos">
  <li *ngFor="let foo of foos">{{foo.text}}</li>
</ul>

Docs

Official Docs