Our @contentular/angular package ist the easiest and most comfortable way to integrate content into your frontend. Simply add the package to your Angular project:
npm install @contentular/angularOur @contentular/angular package ist the easiest and most comfortable way to integrate content into your frontend.
Simply add the package to your Angular project:
```
npm i @contentular/angular
``
yarn add @contentular/angular
Register the ContentularModule in your AppModule:
app.module.ts:
` typescript
import {ContentularCachingStrategy, ContentularModule} from '@contentular/angular';
import {EmployeeComponent} from './shared/components/employee.component';
ContentularModule.forRoot({
apiKey: 'yourApiKey',
persistentCache: true,
cachingStrategy: ContentularCachingStrategy.networkFirst,
componentMap: {
employeeProfile: EmployeeComponent,
}
}),
`
The Contentular Package offers the following options:
| Property | Type | Default | Description |
| ------------- | ------------- | ------------- | ------------- |
| apiKey | string | '' | The key that is assigned to your Space. Copy it from the Space Overview and paste it here. We recommend saving your key as .env variable. |
| persistentCache | boolean | optional | Caches your content on the client side. |
| cachingStrategy | ContentularCachingStrategy | optional |
The ContentularService of the @contentular/angular package takes care of your applications's Contentular API requests.
Two central functions are available:
``
contentularService.getAll()
``
contentularService.findBySlug(slug: string)
app.component.ts:
` typescript
import {ContentularService, Story} from '@contentular/angular';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit {
allStories$: Observable
aboutUsStory$: Observable
constructor(
private contentularService: ContentularService,
) { }
ngOnInit(): void {
this.aboutUsStory$ = this.contentularService.findBySlug('about-us').map([story] => story); // Delivers a Story array. In case you use unique slugs, we recommend a simple .map().
this.allStories$ = this.contentularService.getAll() // Delivers an array with all Stories of your Space.
}
}
` $3
The @contentular/angular package's ContentularComponent uses the componentMap that is defined in the ContentularModule to automatically render the template assigned to the contentType.
app.component.html:
` html`
app.component.ts:
` typescript
import {Content, ContentularService} from '@contentular/angular';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit {
aboutUsContent$: Observable
constructor(
private contentularService: ContentularService,
) { }
ngOnInit(): void {
this.aboutUsContent$ = this.contentularService.findBySlug('about-us')
.map([story] => story)
.map(story => story.contents)
}
}
`
employee-profile.component.ts:
` typescript
import { Content } from '@contentular/angular';
// Create an interface first to determine the properties of your Content.
export interface EmployeeProfile {
employeeImage: string;
firstName: string;
lastName: string;
description: any;
}
@Component({
selector: 'app-employee-profile',
templateUrl: './employee-profile.component.html',
styleUrls: ['./employee-profile.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EmployeeProfileComponent implements OnInit {
// The content is added to your employee component as input.
@Input() content: Content
constructor() {}
ngOnInit(): void {
console.log(‘employee profile content: ’, this.content)
}
}
`
To display your content in the frontend, you only have to pass the template's variables to your employee-profile component.
employee-profile.component.html:
` html``
{{content.fields.firstName}} {{content.fields.lastName}}