angular.md

id
angular

Quick start with Angular

Give a proper backend to your Angular app.

:::warning

This quick start guide focuses exclusively on the frontend. To ensure the functionality of this code, your Manifest backend must be up and running at http://localhost:1111.

:::

1. Create a Angular app

If you already have your Angular app up and running, skip this step.

We will use the Angular CLI to create a new Angular project. You can replace my-client by the name of your front-end app.

ng new my-client
cd my-client
ng serve

2. Install Manifest SDK

Install the JS SDK from the root of your Angular app.

npm i @mnfst/sdk

3. Use it in your app

In that example we are using a Cat entity created previously. Replace it by your own entity.

import { Component } from '@angular/core'
import Manifest from '@mnfst/sdk'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  cats: { id: number, name: string }[] = []

  async ngOnInit() {
    // Init SDK.
    const manifest = new Manifest()

    // Fetch the list of Cats.
    const result = await manifest.from('cats').find()
    this.cats = result.data
  }
}

And in the template:

<ul>
  <li *ngFor="let cat of cats">{{ cat.name }}</li>
</ul>

Checkout the SDK doc to see more usages of the SDK: CRUD operations, file upload, authentication,