webc-miam v8.2.1

NgMiamSdk

NgMiam SDK is an open-source library facilitating interactions between the groceries ordering service Miam and any Angular application.

This project was generated with Angular CLI version 7.3.4.

Features list

• "Order with Miam" button

Getting started

Install the library:

npm install ng-miam

Import NgMiamModule to your AppModule:

import { MIAM_PROVIDER_ID, MIAM_STATUS_ID, NgMiamModule } from "ng-miam";

@NgModule({
  imports: [
    NgMiamModule
  ],
  providers: [
    { provide: MIAM_STATUS_ID, useValue: '2' },
    { provide: MIAM_PROVIDER_ID, useValue: '5' }
  ]
})

Features

Order with Miam button

Use the MiamRecipe type to define your recipe:

import { MiamRecipe } from "ng-miam";
@Component({})
export class AppComponent {
  public recipe: MiamRecipe = {
    'title': 'Smoothie à la banane',
    'media-url': 'https://image-url.miam.tech',
    'preparation-time': "PT5M",
    'cooking-time': "PT5M",
    'ingredients': ['1l de lait', '100g de glace', '70g de banane']
  };
}

Use the ng-miam-order-button component to inject an "Order with Miam" button to your template:

<ng-miam-order-button
  [recipe]="myRecipe"
  (onSaved)="redirectToList($event.id)"
  text="Order with Miam"
></ng-miam-order-button>

You're all set! Clicking the button will post the recipe to Miam (except if it already exists), and prepare a basket containing the ingredients required to cook this recipe.

Use web component

To use Miam's web component in you project simple import the correponfing .js file (all compiled js files are in project/elements/dist/elements)

// For angular you can import it in your main.ts as folow
import 'ng-miam-sdk/projects/elements/dist/components/miam-recipe-card.js';

then add component's tag in your template

<miam-recipe-card></miam-recipe-card>

and in your app.module.ts

 schemas: [CUSTOM_ELEMENTS_SCHEMA]

note that you can use our web componant as régulare angular components using the module import

In other framework as Vue you can just import js file and directly use custom tag

<!--  index.html-->
<script>src="miam-recipe-card.js"</script>
<miam-recipe-card></miam-recipe-card>

implement web component

If you want a custom component you can fork this library then you need to know that our component dont use zone.js and use onPushStrategie More info here :

Our web compoent also use ShadowDom more info here :

if you want to add your own compoment juste creat it like a regular angular component int ng-miam library then in project/elements and a new repo

Running the demo application

To help you getting started, a demo application is available under /src/app. You can run it locally like any angular app.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.