@awinnen/ngx-squidex

Angular Library for headless CMS Squidex

Changelog: https://github.com/awinnen/ngx-squidex

Table of Contents

• Installation
• Usage

Installation

Install the npm module:

npm install @awinnen/ngx-squidex --save

Usage

1. Import the SquidexCMSModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { SquidexCMSModule } from  '@awinnen/ngx-squidex';

@NgModule({
    imports: [
        BrowserModule,
        SquidexCMSModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Provide SquidexCMSConfig in your AppModule

You must provide an SquidexCMSConfig instance. Set clientId, clientSecret, url and app fields. Optionally, you can provide a defaultRequestContext which will set some headers to retrieve only certain languages. Refer to Squidex docs

import { SquidexCMSConfig } from  '@awinnen/ngx-squidex';

@NgModule({
	providers: [
		{
			provide:  SquidexCMSConfig,
			useValue:  Object.assign(new SquidexCMSConfig(), {
				clientId:  "my-squidex-app:public",
				clientSecret:  "2ec71a67-51ec-4130-8c31-b93469c24efa",
				url:  "https://cloud.squidex.io",
				app:  "my-squidex-app",
				defaultRequestContext: {
					flatten:  true,
					languages: ['de']
				}
			} as  Partial<SquidexCMSConfig>)
		}
	]

3. Use SquidexService to Query your CMS

import { SquidexService, SquidexResponse } from  '@awinnen/ngx-squidex';

@Injectable({ providedIn: "root" })
export class DataService {
	constructor(private squidexService: SquidexService) {}
	
	public queryWithContext<T>(schema:  string): Observable<SquidexResponse<T>> {
		return  this.squidexService.query<T>(schema, { 
			flatten:  true, 
			languages: ["en", "de"] 
		});
	} 
}