Deprecated
Use our updated general manual
Note. In the local setup, you will need to use ng serve --disable-host-check
option to open your app at your custom local domain.
-
Install the package
yarn add @peerboard/angular-components
or
npm install @peerboard/angular-components
-
Import the module
// yourapp.module.ts // ... import { AngularComponentsModule } from '@peerboard/angular-components'; @NgModule({ imports: [ // ... AngularComponentsModule, ], // ... }) export class YourAppModule {}
-
Create a component for the forum
import { AfterViewInit, Component, } from '@angular/core'; import { Router } from '@angular/router'; import { ApiService } from '../core'; @Component({ selector: 'app-forum-page', template: ` <div> <div *ngIf="error != ''">{{error}}</div> <div *ngIf="!authReady && !forumReady"> <!-- show loader --> Loading... </div> <!-- Render the forum when auth ready but don't show it to start initialization --> <div *ngIf="authReady" [style.visibility]="forumReady ? 'visible' : 'hidden'"> <!-- boardID - your Board id from integration settings is required --> <!-- jwtToken - bearer token from backend is required --> <!-- prefix - subpath at which the forum rendered is required --> <peerboard-forum [boardId]="boardId" [jwtToken]="jwtToken" [prefix]="prefix" [onLoadFailed]="handleLoadFailed" [onLoadSuccess]="handleLoadSuccess" [onPathChanged]="handlePathChanged" [onTitleChanged]="handleTitleChanged" [onCustomProfile]="handleCustomProfile" > </peerboard-forum> </div> </div> `, styles: [` :host ::ng-deep .forum-container { /* You can style the forum container as you wish. It is recommended to set min height so the forum always expand to that size. */ min-height: calc(100vh - 100px); } `], }) export class ForumComponent implements AfterViewInit { constructor( private router: Router, private apiService: ApiService ) {} authReady = false; forumReady = false; error = ''; boardId = 413170950; jwtToken = ''; prefix = 'community'; ngAfterViewInit() { // Get the auth token from your backend api. // Don't forget to pass requested url except the prefix part to redirect user inside the forum after login const redirect = (this.router.url || '').replace('/' + this.prefix, ''); this.apiService.post(`/peerboard/generate-bearer-token`, { redirect, }).toPromise().then((result) => { // Now we can render forum component to start initialization this.authReady = true; this.jwtToken = result.token; }).catch(err => { console.error(err); this.handleLoadFailed(); }); } handleLoadFailed = () => { this.error = 'Failed to load forum'; } // Don't forget to use arrow function to preserve 'this' // reference or .bind(this) when passing functions as params to components handleLoadSuccess = () => { // Now we can safely show the forum this.forumReady = true; } handleTitleChanged = (title) => { // Change your title window.document.title = 'Forum: ' + title; } handlePathChanged = (path) => { // Update your state window.history.replaceState(null, '', path); } handleCustomProfile = (url: string) => { // If you use custom profile link deep integration feature // you can make smooth transition to the profile page. // url is absolute, so you need to remove everything before the actual path. this.router.navigateByUrl(url.replace(document.location.origin, '')); } }
-
Add router configuration with your prefix, so it will accept any subpaths after that prefix.
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ForumComponent } from './forum.component'; const routes: Routes = [ { // Your prefix path: 'community', children: [ { path: '**', component: ForumComponent, } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ForumRoutingModule {}