kbar

Angular library inspired by kbar React library

Provides plug-n-play tool for efficient navigation on your website.

Features

todo

Usage

npm i kbar-angular

• Add KbarAngularModule to app.module.ts to imports array

• to access components service, add KbarAngularService to providers array

component class

actions = [
  {
    name: "Home",
    keywords: ["home"],
    perform: () => {
      document.location.href = "/";
    },
  },
  {
    name: "Console.log",
    keywords: ["log", "console"],
    perform: () => {
      console.log("Hello world!");
    },
  },
];

component template

<kbar [actions]="actions">
  <kbar-overlay />

  <kbar-positioner>
    <kbar-search></kbar-search>
    <kbar-results></kbar-results>
  </kbar-positioner>
</kbar>

Development

• install dependencies and make sure you're using correct node version

  nvm use
  npm i

• build library npm run lib:build
• build library in watch mode ng build kbar-angular --watch
• run the documentation page npm run example:start