npm package: @peerboard/angular-components
Description: Use our updated [general manual](https://community.peerboard.com/post/1162435747?category=2097967386)
Latest version: 0.0.11
Deprecated: use new manual instead https://community.peerboard.com/post/1162435747

## Deprecated

Use our updated [general manual](https://community.peerboard.com/post/1162435747?category=2097967386)

**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
    ```bash
    yarn add @peerboard/angular-components
    ```
    or
    ```bash
    npm install @peerboard/angular-components
    ``` 

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

3. Create a component for the forum

    ```typescript
   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. 
    ```typescript
    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 {}
    ```