@duffcloudservices/cms-angular

Angular services and build scripts for DCS CMS integration.

Installation

``bash
pnpm add @duffcloudservices/cms-angular
`

Usage

$3

`typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideDcs } from '@duffcloudservices/cms-angular'

export const appConfig: ApplicationConfig = {
providers: [
provideDcs(),
],
}
`

$3

`typescript
// pages/home.component.ts
import { Component, inject, OnInit } from '@angular/core'
import { DcsContentService, DcsSeoService } from '@duffcloudservices/cms-angular'

@Component({
selector: 'app-home',
template:

{{ title }}

{{ subtitle }}

,
})
export class HomeComponent implements OnInit {
private content = inject(DcsContentService)
private seo = inject(DcsSeoService)

get title() {
return this.content.t('home', 'hero.title', 'Welcome')
}

get subtitle() {
return this.content.t('home', 'hero.subtitle', 'Build amazing things')
}

ngOnInit() {
this.seo.setPageSeo('home')
}
}
`

$3

After running ng build, inject the DCS content into index.html:

`bash
npx dcs-inject dist/my-app
`

Or add to your package.json scripts:

`json
{
"scripts": {
"build": "ng build && dcs-inject dist/my-app"
}
}
`

$3

Create .dcs/content.yaml:

`yaml
version: 1
global:
nav.home: Home
footer.copyright: © 2026 Company
pages:
home:
hero.title: Welcome to Our Site
hero.subtitle: Build something amazing
`

Create .dcs/seo.yaml:

`yaml
version: 1
global:
siteName: My Site
defaultTitle: My Site
titleTemplate: "%s | My Site"
pages:
home:
title: Welcome
description: The homepage of My Site
`

API

$3

Service for text content management.

Methods:
- t(page, key, fallback?): Get text by page and key
- getPageContent(page): Get all content for a page
- fetchRuntimeContent(siteSlug, apiBaseUrl?): Fetch runtime content (premium)

Signals:
- content: Current content configuration
- isLoading: Loading state
- error: Error message

$3

Service for SEO meta tag management.

Methods:
- setPageSeo(page, overrides?): Apply SEO for a page
- getSeoConfig(): Get raw SEO configuration

$3

Inject content into Angular build output.

`bash
npx dcs-inject [options]

Options:
--content-path Path to content.yaml (default: .dcs/content.yaml)
--seo-path Path to seo.yaml (default: .dcs/seo.yaml)
--index-file Index file name (default: index.html)
``

License

MIT