cap-angular-schematic-contentful
v0.0.21
Published
A CAP Contentful Schematic
Downloads
7
Maintainers
Readme
cap-angular-schematic-responsive
This repository is a Schematic for use with Contentful API.
The Schematic will create a service to manage Contentful queries:
Prerequisites
- Have an Angular app install npm 6.13.7
nmp install
- Node 10.6 to the current.
Installation
To run the schematic, execute the following command.
ng add cap-angular-schematic-contentful
The schematic will be configurated after you answer the following questions.
- What is the Contentful access token? : < string >
- What is the Contentful space? : < string >
- What is the Contentful environment? : < string >
Functionality
The schematic add the module into the app.module.ts file
import { CapContentfulModule } from 'cap-angular-contentful'
configure into the import section
@NgModule({
imports: [
CapContentfulModule.forRoot({
space_id: '<your Contentful Space>',
environment: '<your Contentful Environment>'
delivery_accessToken: '<your Contentful Access Token>',
})
],
})
export class AppModule { }
Use
Import the CapContentfulService service into your .ts file. Example
import { Component } from '@angular/core';
import { CapContentfulService } from 'cap-angular-contentful';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private contentful: CapContentfulService){
}
}
Service
The module export the CapContentfulService service that allows you to use the followings methods:
getItems Return the items related with a specific content type Example:
contentful.getItems('person', 3, 2).subscribe( item => {
console.log('items with specify limit: ', item);
})
getItemById Return a specific item by Id Example:
contentful.getItemById('3K9b0esdy0q0yGqgW2g6Ke').subscribe(resp => {
console.log('getItemById: ', resp);
this.title = resp.fields.title;
this.author = resp.fields.author
this.bodyD = resp.fields.body
this.description = resp.fields.description
this.heroImage = resp.fields.heroImage
this.publishDate = resp.fields.publishDate
this.slug = resp.fields.slug
this.tags = resp.fields.tags
})
getElementsByContentType Return a list of items related with a specific content type Example:
contentful.getElementsByContentType('person', 2, 2).subscribe(resp => {
console.log('getElementsByContentType: ', resp);
})
getAssets Return an item related with a specific assetId Example:
contentful.getAssets('6Od9v3wzLOysiMum0Wkmme').subscribe(resp => {
console.log('resp: ', resp);
})
Advantages over Official Contentful Client
Whit this service all http requests can be intercepted by a Angular Http interceptor, so, can be cached, show a loading screen, and apply to requests any common use with a interceptor.
Usage
Angular 9
Built With
Version
0.0.1
Authors
Software Allies - Software Allies
Contributor
César Alonso Magaña Gavilanes - cesaralonso
License
MIT © Software Allies