https://github.com/scheduleonce/knowledgeowl-angular
Knowledge Owl for Angular
https://github.com/scheduleonce/knowledgeowl-angular
angular knowledge-base knowledge-management knowledge-owl
Last synced: 3 months ago
JSON representation
Knowledge Owl for Angular
- Host: GitHub
- URL: https://github.com/scheduleonce/knowledgeowl-angular
- Owner: scheduleonce
- License: mit
- Created: 2019-01-23T12:58:58.000Z (over 7 years ago)
- Default Branch: qa
- Last Pushed: 2026-03-11T13:48:43.000Z (4 months ago)
- Last Synced: 2026-03-11T19:44:33.147Z (4 months ago)
- Topics: angular, knowledge-base, knowledge-management, knowledge-owl
- Language: TypeScript
- Homepage:
- Size: 6.15 MB
- Stars: 1
- Watchers: 9
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# knowledgeowl-angular
[](https://github.com/scheduleonce/relative-luminance/actions) [](https://github.com/prettier/prettier)
> KnowledgeOwl knowledgebase for Angular
Project that enables Angular applications to integrate [KnowledgeOwl](https://www.knowledgeowl.com) widget. This gives following features:
1. Integrate KnowledgeOwl angular widget into application.
2. Link HTML element to KnowledgeOwl article.
## How to install?
You can use npm command line tool to install package.
```sh
npm install @oncehub/knowledgeowl-angular
```
## How to use?
Import the Module:
```sh
import {KnowledgeOwlWidgetModule, KnowledgeOwlLinkModule} from '@oncehub/knowledgeowl-angular';
@NgModule({
...
imports: [KnowledgeOwlWidgetModule, KnowledgeOwlLinkModule],
providers: [{provide: 'KOProjectURL', useValue: 'https://knowledgeowlurl.com'}]
...
})
export class AppModule { }
```
Add widget in app.component.html
```tsx
```
## How to link article to `` or `button`?
## Directives
### `KnowledgeOwlWidget`
Selector: `knowledge-owl-widget`
Exported as: `knowledgeOwlWidget`
## Properties
| Name | Required | Description |
| ------------------------------------ | -------- | ---------------------------------------------- |
| @Input()
`projectKey: string` | true | Product key to access KnowledgeOwl widget |
| @Input()
`pageLocation: string` | false | Page location of application. Example "\start" |
### Open the widget programmatically
The widget exposes an API to open/close programmatically.
```ts
class MyComponent {
@ViewChild(KnowledgeOwlWidget) widget: KnowledgeOwlWidget;
someMethod() {
this.widget.open();
}
}
```
### Open the article in widget programmatically
The widget exposes an API to open/close widget with article programmatically.
```ts
class MyComponent {
@ViewChild(KnowledgeOwlWidget) widget: KnowledgeOwlWidget;
someMethod() {
this.widget.open('article-name');
}
}
```
## Directives
### `KnowledgeOwlLink`
Selector: `knowledgeOwlLink`
Exported as: `knowledgeOwlLink`
## Properties
| Name | Required | Description |
| ---------------------------------------- | -------- | ------------------------- |
| @Input()
`knowledgeOwlLink: string` | true | KnowledgeOwl Article Name |
## Development
### How to publish a new version
Create a new version
```sh
npm version [ | major | minor | patch]
```
New version is automatically published to npm when [creating a new release](.github/workflows/npm-publish.yml) on Github. Check out the release section in the repo. Read more about releases [here](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository).