Comments (5)
@Jscott388 When you use WpPost, all post properties are accessed using the functions.
First create a child component, let's say <post-item>
and in its template
<md-card *ngIf="post">
<md-card-title-group>
<md-card-title>
<h4>{{ post.title() }}</h4>
</md-card-title>
<md-card-subtitle>
<h5>{{ post.date() }}</h5>
</md-card-subtitle>
<img *ngIf="post.featuredMedia()" [src]="post.featuredImage('large')">
</md-card-title-group>
<md-card-content>
<p [innerHTML]="post.excerpt()"></p>
</md-card-content>
<md-card-actions>
<button md-raised-button [routerLink]="['./', post.slug()]">Read More</button>
</md-card-actions>
<md-card-footer>
<md-chip-list *ngFor="let tag of post.tags()">{{ tag.name }}</md-chip-list>
</md-card-footer>
</md-card>
export class PostItemComponent{
post: WpPost;
@Input() set data(data) {
// create WpPost from data
this.post = new WpPost(data);
}
}
In parent component
<div wpCollection="posts" [wpArgs]="args"
(wpResponse)="onWpResponse($event)" (wpLoading)="loading = $event">
<post-item *ngFor="let post of posts" [data]="post"></post-item>
</div>
<md-spinner *ngIf="loading"></md-spinner>
<button md-raised-button (click)="more()">Load More Posts</button>
posts;
args = {
per_page: 5, //get 5 items per page
_embed: true //enable featured image, categores, tags and author in the response
};
/** Handle WP Response */
onWpResponse(res) {
if (res) {
if (res.error) {
console.log('[WP posts response]:', res.error);
}
if(!res.data.length){
console.log('[WP posts response]: Empty response!');
}
if (res.data) {
this.posts = res.data;
}
}
@ViewChild(CollectionDirective) wpCollection;
/**
* Use the directive reference to call functions like `next()` `prev()` for pagination
* or `more()` for loading more
*/
more() {
this.wpCollection.more();
}
}
from ngx-wordpress.
@MurhafSousli Thanks! Do you have a full fledged working example site that I could reference too? I would like to see it more in action than just code samples. I would love to help the wiki out in actually making a start from finish tutorial. Just getting my head around Angular 4 and how everything works.
from ngx-wordpress.
@Jscott388 I would have made a demo, but github pages requires a secured wordpress url (https) and mine is http
, if you have a secured one already and you don't mind sharing it, I can make a demo using your wp backend
And sure It would be great if someone can help me improving the wiki
from ngx-wordpress.
Have nothing in a repo? Don't need a live working one, just general layout.
from ngx-wordpress.
Unfortunately I don't have one
from ngx-wordpress.
Related Issues (20)
- TypeError 'map' of null HOT 2
- Can't bind to 'wpModel' and 'wpId" HOT 2
- Missing 'Directive Model usage' in depth HOT 1
- Not work methods of WpPost instance HOT 3
- Use InjectionToken
- Can you point to more example code? HOT 3
- How to use WpPost HOT 4
- WpService sending request to wrong url i.e appending url twice
- Support Angular 5 HOT 1
- Support for Joomla HOT 1
- why not use angular-cli, instead have a bloated build spec?
- Angular 5 build warnings - potential errors.
- Add WordPressMockModule for development
- Angular 7 support HOT 2
- ERROR in node_modules HOT 2
- Token not getting set in the browser local storage HOT 11
- Angular 11 support? HOT 1
- API Doc link wrong
- Open to adding maintainers? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-wordpress.