angular
The Project
This guide explains how to create a simple Angular application that utilizes the Squid Angular SDK with a Squid backend. The application inserts random users into the database and display their information on an Angular website.
Insert
Squid organizes data into collections and documents. Documents are individual records in the database (such as rows in a table), while collections are groups of documents (similar to unstructured tables). To access a Squid collection, use the collection() method with the collection name as the first parameter.
To create a new document in Angular, use the insert() method on a document reference. Document references can be initialized with a document ID, which you can learn more about in our documentation. Create a new insert-user component:
cd my-app-frontend
ng generate component insert-user
This will create a new insert-user directory at src/app/insert-user. Inside that directory is a insert-user.component.ts file where we can update the components appearance and functionality. Add a <button> element that creates a new user in the users collection every time the button is clicked:
import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
// Define your type
type User = { id: string; email: string; age: number };
@Component({
selector: 'insert-user',
template: `
<button (click)="insertNewUser()">Create user</button>
<br />
`,
})
export class InsertUserComponent {
constructor(private readonly squid: Squid) {}
// Insert data
async insertNewUser(): Promise<void> {
const userId = crypto.randomUUID();
const email = `${userId}@gmail.com`;
await this.squid
.collection<User>('users')
.doc(userId)
.insert({
id: userId,
email,
age: Math.ceil(Math.random() * 100),
});
}
}
Read
Next, create a read-users component to display the list of users on the webpage.
ng generate component read-users
Squid provides a robust and powerful query system. To simply get the collection of users from Squid, there are multiple different options which suit different use cases. In src/app/read-users/read-users.component.ts, we can subscribe to the users collection by calling the snapshots() method:
import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
import { map } from 'rxjs';
type User = { id: string; email: string; age: number };
@Component({
selector: 'read-users',
template: ` <ul>
<li *ngFor="let user of users | async">
{{ user.email }} - {{ user.age }}
</li>
</ul>`,
})
export class ReadUsersComponent {
constructor(private readonly squid: Squid) {}
users = this.squid
.collection<User>('users')
.query()
.dereference()
.snapshots();
}
By subscribing to the users collection, the list of users displayed will update in real-time whenever a new user is added to the collection.
To see this functionality in action, include the new components in the src/app/app.component.html file:
<insert-user />
<read-users />
<router-outlet></router-outlet>
With Squid's real-time functionality, you can insert data in one tab and instantly see the updates in other tabs without requiring any additional code!
Update
To update a document in the collection, call the update() method on a DocumentReference and pass in an object that contains the partial update data as an argument. To do so, we will first create a new update-user component:
ng generate component update-user
Next, update src/app/update-user/update-user.component.ts with an HTML form that updates a user's age in the database. To use the form, first update my-app-frontend/src/app/app.module.ts to import the FormsModule:
import { FormsModule } from "@angular/forms";
...
@NgModule({
imports: [
FormsModule,
...
],
})
Now that we can use the FormsModule, update src/app/update-user/update-user.component.ts with a new form. The form also contains some basic styling:
import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
type User = { id: string; email: string; age: number };
@Component({
selector: 'update-user',
template: `
<form style="margin: 10px" name="form" (ngSubmit)="updateUser()">
<div>
<label style="padding-right: 9px" for="input-id">ID: </label>
<input id="input-id" name="input-id" [(ngModel)]="inputId" />
</div>
<div>
<label for="input-age">Age: </label>
<input
id="input-age"
name="input-age"
type="number"
[(ngModel)]="inputAge"
/>
</div>
<button style="margin-top: 4px">Update Age</button>
</form>
`,
})
export class UpdateUserComponent {
constructor(private readonly squid: Squid) {
this.inputId = '';
}
inputId: string;
inputAge: number | undefined;
async updateUser(): Promise<void> {
if (this.inputAge) {
await this.squid.collection<User>('users').doc(this.inputId).update({
age: this.inputAge,
});
}
}
}
We can then update src/app/app.component.html to include the new component. Remember that the email prefixes on the webpage are actually user IDs. To use the update form, enter a user ID along with a new age:
<insert-user />
<read-users />
<update-user />
<router-outlet></router-outlet>
Delete
To delete a document, call the delete() method on a DocumentReference. To do so, we will first create a new delete-user component:
ng generate component delete-user
Next, we will implement another form in src/app/delete-user/delete-user.component.ts where we can input the ID of the user we want to delete.
import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
type User = { id: string; email: string; age: number };
@Component({
selector: 'delete-user',
template: `
<form style="margin: 10px" name="form" (ngSubmit)="deleteUser()">
<div>
<label style="padding-right: 9px" for="input-id">ID: </label>
<input id="input-id" name="input-id" [(ngModel)]="inputId" />
</div>
<button style="margin-top: 4px">Delete</button>
</form>
`,
})
export class DeleteUserComponent {
constructor(private readonly squid: Squid) {
this.inputId = '';
}
inputId: string;
async deleteUser(): Promise<void> {
await this.squid.collection<User>('users').doc(this.inputId).delete();
}
}
Finally, bring the delete-user component into src/app/app.component.html to test out the new delete functionality:
<insert-user />
<read-users />
<update-user />
<delete-user />
<router-outlet></router-outlet>
After completing the delete component, we are now able to use Squid’s built in database service to accomplish all the major functionality that is required in a database.
Next steps
Congratulations on completing the tutorial! To learn about key features of the Squid backend including security functionality, view the Backend SDK documentation. To learn about the functionality of the Squid Client SDK including more complex data queries, managing secrets, and interacting with your storage buckets, view the Client SDK documentation.