Start with Angular

Learn how to setup your first Angular project powered by Appwrite.

1

Create project

Head to the Appwrite Console.

Create project screen

Create project screen

If this is your first time using Appwrite, create an account and create your first project.

Then, under Add a platform, add a Web app. The Hostname should be localhost.

Add a platform

Add a platform

You can skip optional steps.

2

Create Angular project

Create an Angular project.

If you don't have Angular CLI installed, run this command.

Shell
npm install -g @angular/cli

Then, create a project.

Shell
ng new my-app
cd my-app
3

Install Appwrite

Install the JavaScript Appwrite SDK.

Shell
npm install [email protected]
4

Import Appwrite

Find your project's ID in the Settings page.

Project settings screen

Project settings screen

Create a new file src/lib/appwrite.ts and add the following code to it, replace <PROJECT_ID> with your project ID.

Web
import { Client, Account} from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';
5

Create a login page

First, add imports for the FormsModule from Angular to handle the login form..

TypeScript
import { FormsModule } from '@angular/forms';
...
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, replace the contents of src/app/app.component.html.

HTML
<div>
  <p>
    {{ loggedInUser ? 'Logged in as ' + loggedInUser.name : 'Not logged in' }}
  </p>

  <div>
    <input type="email" placeholder="Email" [(ngModel)]="email" />
    <input type="password" placeholder="Password" [(ngModel)]="password" />
    <input type="text" placeholder="Name" [(ngModel)]="name" />

    <button (click)="login(email, password)">
      Login
    </button>

    <button (click)="register(email, password, name)">
      Register
    </button>

    <button (click)="logout()">
      Logout
    </button>
  </div>
</div>

Lastly, update src/app/app.component.ts.

TypeScript
import { Component } from '@angular/core';
import { account, ID } from '../lib/appwrite';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedInUser: any = null;
  email: string = '';
  password: string = '';
  name: string = '';

  async login(email: string, password: string) {
    await account.createEmailPasswordSession(email, password);
    this.loggedInUser = await account.get();
  }

  async register(email: string, password: string, name: string) {
    await account.create(ID.unique(), email, password, name);
    this.login(email, password);
  }

  async logout() {
    await account.deleteSession('current');
    this.loggedInUser = null;
  }
}
6

All set

Run your project with ng serve --port 3000 and open Localhost on Port 3000 in your browser.