Angularjs 2 services with wordpress rest api

Hello, welcome to therichpost.com. In this post, I will tell you How to Get WordPress data with Angular2 services? Nowadays Angularjs is very popular and known as one page website. I am familiar with Angular 1 very well but Angular 2 is totally different with Angular 1. Angular2 is totally command based. WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress.

We will get WordPress data in json format and get in angular2 with http services and show in Angular2 template with ng directives.

Image of WordPress data in json format After Rest Api Hook:

Finally here is the working WordPress Rest Api and you need to add this code into your theme’s functions.php file:

add_action( ‘rest_api_init’, function () {
register_rest_route( ‘wp/v2’, ‘/getusers/’, array(
‘methods’ => ‘GET’,
‘callback’ => ‘get_users_names’
) );
} );

function get_users_names()
{
global $wpdb;
$myArr = array();
$wp_user_search = $wpdb->get_results(“SELECT ID, display_name FROM $wpdb->users ORDER BY ID”);

foreach ( $wp_user_search as $userid ) {

$myArr[] = stripslashes($userid->display_name);

}
$myJSON = json_encode($myArr);
echo $myJSON;
die();
}

Here please check code in angularjs 2 component and you need to add the code in component(app.component.ts):

import { Http, Response ,RequestOptions,Headers} from ‘@angular/http’;
import {Component, OnInit} from ‘@angular/core’;
import { appService } from ‘./app.service’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/Rx’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/toPromise’;
import ‘rxjs/add/operator/catch’;
import ‘rxjs/add/operator/delay’;
import {Injectable} from ‘@angular/core’;
import {BrowserAnimationsModule} from “@angular/platform-browser/animations”;
import {
trigger,
state,
style,
animate,
transition
, group
} from ‘@angular/animations’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’],
providers: [appService]
})
export class AppComponent implements OnInit {
/*services*/
getApp: any;
constructor(public appservice: appService, public http: Http) {}
ngOnInit() {
/*services*/
this.appservice.getApp().subscribe(data => this.getApp = data);}
}

Here please check code in angularjs 2 Html component and you need to add the code in html component(app.component.html):

<ul *ngFor=”let name of getApp”>
<li>{{name}}</li>
</ul>

And Finally here is the angularjs 2 services code ad you need to add this code in app.service.ts file

app.service.ts
import { Injectable } from ‘@angular/core’;
import { Http, Response ,RequestOptions,Headers} from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’
@Injectable()
export class appService {
postResponse:any ;
constructor(private http:Http) { }
getApp() {
return this.http.get(‘http://localhost/wordpress49/wp-json/wp/v2/usesrs/’)
.map((res:Response) => res.json());
}
}

There are many more code in Angular2 and WordPress and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com