@upbinger/blog-angular

Angular module for embedding Upbinger blog content into your Angular application.

Installation

npm install @upbinger/blog-angular
# or
yarn add @upbinger/blog-angular

Quick Start (Standalone Components - Angular 16+)

// app.routes.ts
import { Routes } from '@angular/router';
import { getUpbingerBlogRoutes } from '@upbinger/blog-angular';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  // Add blog routes - handles /blog, /blog/:slug, /blog/page-:page
  ...getUpbingerBlogRoutes(),
];

// app.config.ts
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
  ]
};

Quick Start (NgModule)

// app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UpbingerBlogModule, getUpbingerBlogRoutes } from '@upbinger/blog-angular';

@NgModule({
  imports: [
    UpbingerBlogModule.forRoot({
      cdnBase: 'https://cdn.upbinger.com',
      debug: false,
    }),
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      ...getUpbingerBlogRoutes(),
    ]),
  ],
})
export class AppModule {}

Configuration

Configure the service in your app initialization:

// app.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { UpbingerBlogService } from '@upbinger/blog-angular';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements OnInit {
  private blogService = inject(UpbingerBlogService);

  ngOnInit() {
    this.blogService.configure({
      cdnBase: 'https://cdn.upbinger.com',
      basePath: '/blog',
      debug: true,
      domain: 'example.com', // Optional: override domain detection
    });
  }
}

Using Components Directly

For custom layouts, use the content component directly:

import { Component } from '@angular/core';
import { UpbingerBlogContentComponent } from '@upbinger/blog-angular';

@Component({
  selector: 'app-custom-blog',
  standalone: true,
  imports: [UpbingerBlogContentComponent],
  template: `
    <div class="my-custom-wrapper">
      <upbinger-blog-content 
        type="post" 
        [slug]="'my-post-slug'">
      </upbinger-blog-content>
    </div>
  `
})
export class CustomBlogComponent {}

Content Component Inputs

| Input | Type | Description | |-------|------|-------------| | type | 'listing' \| 'post' | Content type to load | | slug | string | Blog post slug (for type='post') | | page | number | Page number (for type='listing') |

Using the Service

For fully custom implementations:

import { Component, inject } from '@angular/core';
import { UpbingerBlogService } from '@upbinger/blog-angular';

@Component({
  selector: 'app-custom',
  template: `
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="content" [innerHTML]="content"></div>
  `
})
export class CustomComponent {
  private blogService = inject(UpbingerBlogService);
  loading = true;
  content = '';

  ngOnInit() {
    this.blogService.fetchContent('my-post.html').subscribe({
      next: (html) => {
        this.content = this.blogService.extractBodyContent(html);
        this.loading = false;
      },
      error: (err) => {
        console.error(err);
        this.loading = false;
      }
    });
  }
}

Routes Created

| Path | Description | |------|-------------| | /blog | Blog listing (page 1) | | /blog/page-2 | Blog listing (page 2, etc.) | | /blog/my-post-slug | Individual blog post |

Exported Items

Components (Standalone)

• UpbingerBlogComponent - Main container with router outlet
• UpbingerBlogContentComponent - Renders blog content
• UpbingerBlogListingComponent - Listing page (page 1)
• UpbingerBlogListingPageComponent - Listing page with pagination
• UpbingerBlogPostComponent - Individual blog post

Services

• UpbingerBlogService - Configuration and content fetching

Functions

• getUpbingerBlogRoutes(basePath?: string) - Returns route configuration

Modules

• UpbingerBlogModule - NgModule for non-standalone usage

Requirements

• Angular 16+
• HttpClientModule (or provideHttpClient())
• RouterModule (or provideRouter())
• Blogs published through Upbinger dashboard

License

MIT