CODEWITHSUNDEEP
mongodbangulartypescript
trashvin
trashvin

Reputation: 595

Using mongodb-stitch library in Angular 4

Im been trying the MongoDB Stitch service in Angular, so far Im able to use the service. However, the only way I could connect to the service is by including the js library hosted in AWS on the html page.

There is a mongodb-stitch npm package available and there are sample pages on mongodb tutorial on how to use it. But this is a pure JS library (no TS support) and I have tried several ways (using require, installing typings of the lib (not available), using @types) to no avail.

Anyone tried this on Ng4? Would love to have the steps you did to use the 'mongodb-stitch' package the create a service.

Upvotes: 3

Views: 1984

Answers (3)

Cristian Agudelo
Cristian Agudelo

Reputation: 627

the previous answers are functional, but i wanna share a example using a service injectable.

service.ts

import { Injectable }    from '@angular/core';
import { Jsonp, URLSearchParams } from '@angular/http';

import { StitchClientFactory } from "mongodb-stitch";

import 'rxjs/add/operator/map';
@Injectable()
export class Service {  
  constructor(private jsonp: Jsonp) { }    
  client;
  connect(){
    this.client = new StitchClientFactory.create("App ID");  // Slitch apps > Clients > App ID
    this.client.then(stitchClient => stitchClient.login())
      .then((stitchClient) => console.log('logged in as: ' + stitchClient))
      .catch(e => console.log('error: ', e));
  }
  all() {
    this.connect();     
    return this.client.then(stitchClient => {
      let db = stitchClient.service('mongodb', 'mongodb-atlas').db("database Name"); // Slitch apps > mongodb-atlas > Name database.Collection
      let itemsCollection = db.collection('name collection'); // Slitch apps > mongodb-atlas > Name database.Collection        
      console.log(itemsCollection.find().execute());
      return itemsCollection.find().execute();                  
    })
     .then(result => {return result})
     .catch(e => console.log('error: ', e));          
   }
 }

after make the previous file, you must create a module to receive the data, so:

module.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { StitchClientFactory } from "mongodb-stitch";
import { Service }          from 'service'; // previous code

declare var stitch: any;

@Component({  
  template: '
    <ul class="demo-list-icon mdl-list">
      <li class="mdl-list__item" *ngFor="let item of data | async">
         <span class="mdl-list__item-primary-content">
           <i class="material-icons mdl-list__item-icon">{{propiedad.nombre}}</i>            
         </span>
      </li>
   </ul>
  '  
 })
 export class MainComponent implements OnInit {  
   data: Observable<[]>;
   constructor(private Service: service) {
   }
   ngOnInit() {     
     this.propiedades = this.Service.all();
   }  
}

important, you don´t must forget to add service on module.ts intitial declarations.

mongodb Atlas

mongodb-stitch vía NPM

Documentation mongoDB Stitch.

Sure!

Upvotes: 1

theRealTraveller
theRealTraveller

Reputation: 135

The other answer suggests instantiating a new instance of StitchClient which is something that MongoDB have explicitly advised against in the Official API Documentation - and with reason, since there is a factory method available for that purpose. So, (after installing mongodb-stitch), the following code would help you get started in component.ts

import { Component, OnInit } from "@angular/core";
import { StitchClientFactory } from "mongodb-stitch";

let appId = 'authapp-****';

@Component({
selector: "app-mongo-auth",
templateUrl: "./mongo-auth.component.html",
styleUrls: ["./mongo-auth.component.css"]
})

export class MongoAuthComponent implements OnInit {

mClient;

ngOnInit() {
  this.mClient = StitchClientFactory.create(appId);
}

And you can then use this for whatever purpose you want, such as for implementing sign-in with Google

gLogin(){
this.mClient.then(stitchClient => {
  stitchClient.authenticate("google");
})

Upvotes: 3

neta
neta

Reputation: 61

not sure whether the question is still relevant considering it was asked two months ago but anyway...

As you pointed out you can use npm install --save mongodb-stitch to install the package and since there is no TS binding you can declare the stitch library as any

For example:

    declare var stitch: any;

    export class MyService implements OnInit {
    db;

    client;

    ngOnInit() {
        this.client = new stitch.StitchClient('<check the stitch app page for proper value>');
        this.db = this.client.service('mongodb', 'mongodb-atlas').db('<the db name goes here>');
        this.client.login();
    }

    save() {
        this.db.collection('<collection name>').insertOne({key : 'value'}).then(() => console.log("All done"));
    }

  }

Upvotes: 1

Related Questions