@bailaya/angular

An Angular component library and service for the BailaYa public API

Overview

@bailaya/angular builds on top of @bailaya/core to provide:

• A provideBailaya provider function + BailayaService injectable
• An Angular service wrapping all API methods as RxJS Observables
• Standalone components with sensible defaults (and full styling slots)
• Full TypeScript support, including localized text & date formatting

Works with or without Tailwind. If you don't use Tailwind, just override the class input props to apply your own styling.

Features

• Provider + service (provideBailaya + BailayaService)

• BailayaService methods (all return Observable<T>)

  • getStudioProfile(overrideId?)
  • getUserProfile(userId)
  • getInstructors(overrideId?)
  • getClasses(startDate?, overrideId?)
  • getClassesByType(typeName, startDate?, overrideId?)
  • getEvents(startDate?, overrideId?)
  • getPackages(overrideId?)
  • getPrivateLessonInstructors(overrideId?)

• Components (all inputs overridable, standalone with Angular 17 @if/@for)

  • <bailaya-class-schedule>
  • <bailaya-class-schedule-by-type>
  • <bailaya-event-schedule>
  • <bailaya-instructor-list>
  • <bailaya-studio-profile-card>
  • <bailaya-studio-description>
  • <bailaya-studio-types-list>
  • <bailaya-studio-types-grid>
  • <bailaya-user-profile-card>
  • <bailaya-private-lesson-list>
  • <bailaya-package-list>

Installation

npm install @bailaya/angular @bailaya/core

or with Yarn:

yarn add @bailaya/angular @bailaya/core

Peer Dependencies

• "@angular/common": "^17.3.0"
• "@angular/core": "^17.3.0"
• "@bailaya/core": "^1.2.0"

Quick Start

Register the provider in app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideBailaya } from '@bailaya/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBailaya({ studioId: 'YOUR_STUDIO_ID' }),
  ],
};

Using the Service

import { Component, inject, OnInit } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { BailayaService } from '@bailaya/angular';
import { Observable } from 'rxjs';
import type { Instructor } from '@bailaya/angular';

@Component({
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <ul>
      @for (i of instructors$ | async; track i.id) {
        <li>{{ i.name }} {{ i.lastname }}</li>
      }
    </ul>
  `,
})
export class TeamComponent implements OnInit {
  private bailaya = inject(BailayaService);
  instructors$!: Observable<Instructor[]>;

  ngOnInit() {
    this.instructors$ = this.bailaya.getInstructors();
  }
}

Using a Component

import { Component } from '@angular/core';
import { StudioProfileCardComponent } from '@bailaya/angular';

@Component({
  standalone: true,
  imports: [StudioProfileCardComponent],
  template: `<bailaya-studio-profile-card locale="en" />`,
})
export class DashboardComponent {}

API Reference

provideBailaya(options)

Registers the BailayaClient and BailayaService in the Angular dependency injection tree.

• options.baseUrl?: string – override default API URL
• options.studioId?: string – default studio ID

BailayaService

Inject BailayaService to call API methods directly as Observables.

| Method | Returns | |---------------------------------------------------------|--------------------------------------| | getStudioProfile(overrideId?) | Observable<StudioProfile> | | getUserProfile(userId) | Observable<UserProfile> | | getInstructors(overrideId?) | Observable<Instructor[]> | | getClasses(startDate?, overrideId?) | Observable<StudioClass[]> | | getClassesByType(typeName, startDate?, overrideId?) | Observable<StudioClass[]> | | getEvents(startDate?, overrideId?) | Observable<StudioEvent[]> | | getPackages(overrideId?) | Observable<StudioPackage[]> | | getPrivateLessonInstructors(overrideId?) | Observable<PrivateLessonInstructor[]> |

Components

All components are standalone and use Angular 17 @if/@for control flow. All styling class names are overridable via @Input().

| Selector | Key Inputs | |-------------------------------------|----------------------------------------------------------------------------------------------------| | <bailaya-studio-profile-card> | overrideId?, locale?, labels? | | <bailaya-studio-description> | overrideId?, locale? | | <bailaya-instructor-list> | overrideId?, locale? | | <bailaya-user-profile-card> | userId, locale?, labels? | | <bailaya-class-schedule> | from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton?, labels? | | <bailaya-class-schedule-by-type> | typeName, from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton? | | <bailaya-event-schedule> | from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton?, labels? | | <bailaya-studio-types-list> | overrideId?, locale?, hrefPrefix? | | <bailaya-studio-types-grid> | overrideId?, locale?, showDescription? | | <bailaya-private-lesson-list> | overrideId?, locale?, bookBaseUrl?, labels? | | <bailaya-package-list> | overrideId?, locale?, buyBaseUrl?, labels? |

Importing components

import {
  ClassScheduleComponent,
  PrivateLessonListComponent,
  PackageListComponent,
} from '@bailaya/angular';

@Component({
  standalone: true,
  imports: [ClassScheduleComponent, PrivateLessonListComponent, PackageListComponent],
  templateUrl: './my.component.html',
})
export class MyComponent {}

License

ISC