:heart_eyes: Easy way to display your Contentular Content :mechanical_arm:

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 i @contentular/angular
`

`
yarn add @contentular/angular
`

$3

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 |

• cacheFirst || "cache-first"
• networkFirst || "network-first"
• networkOnly || "network-first"

`
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

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}}