Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@peerboard/angular-components
Advanced tools
Use our updated [general manual](https://community.peerboard.com/post/1162435747?category=2097967386)
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 {}
FAQs
Use our updated [general manual](https://community.peerboard.com/post/1162435747?category=2097967386)
The npm package @peerboard/angular-components receives a total of 2 weekly downloads. As such, @peerboard/angular-components popularity was classified as not popular.
We found that @peerboard/angular-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.