First things first, make sure you've got Node.js and npm on your system. Then, let's get Angular CLI installed globally:

npm install -g @angular/cli

Time to create a new Angular project using the CLI:

ng new my-angular-app

Now, hop into the project directory:

cd my-angular-app

Next up, let's install the Supabase client library:

npm install @supabase/supabase-js

Head over to Supabase and create a new project. Once you're done, go to "Project Settings" to grab your SUPABASE_URL and SUPABASE_KEY.

In your Angular project, create a new file called supabase.config.ts in the src directory.

// src/supabase.config.ts

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = '<your-supabase-url>';
const SUPABASE_KEY = '<your-supabase-key>';

export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

Let's generate a service to interact with Supabase:

ng generate service supabase

Now, open up the generated service file and tweak it a bit:

// src/app/supabase.service.ts

import { Injectable } from '@angular/core';
import { supabase } from 'src/supabase.config';

@Injectable({
  providedIn: 'root',
})
export class SupabaseService {
  constructor() {}

  // Example method to fetch data from Supabase
  async getData(table: string) {
    const { data, error } = await supabase.from(table).select('*');
    if (error) {
      throw error;
    }
    return data;
  }
}

Inject the SupabaseService into your Angular component to use the data fetched from Supabase:

ng generate component example

Modify the component to use the service:

// src/app/example/example.component.ts

import { Component, OnInit } from '@angular/core';
import { SupabaseService } from '../supabase.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any[] = [];

  constructor(private supabaseService: SupabaseService) {}

  async ngOnInit() {
    try {
      this.data = await this.supabaseService.getData('your_table_name');
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

Update the component's HTML file to show the data:

<!-- src/app/example/example.component.html -->

<div *ngIf="data.length === 0">No data available</div>
<div *ngIf="data.length > 0">
  <ul>
    <li *ngFor="let item of data">{{ item | json }}</li>
  </ul>
</div>

Finally, let's run the Angular app to see Supabase data in action:

ng serve

Navigate to http://localhost:4200 and check out the data from Supabase displayed in the component you created.