@peerboard/angular-components

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.

1. Install the package

   yarn add @peerboard/angular-components
   

   or

   npm install @peerboard/angular-components
   

2. Import the module

   // yourapp.module.ts 
   // ...
   import { AngularComponentsModule } from '@peerboard/angular-components';
   
   @NgModule({
     imports: [
       // ...
       AngularComponentsModule,
     ],
     // ...
   })
   export class YourAppModule {}
   

3. 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, ''));
    }
   }
   

4. 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 {}