---
title: "Integrating Brainfish Widgets with Angular"
description: "1. Install the Brainfish Dependency"
canonical_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-angular-DBGpDomtga"
md_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-angular-DBGpDomtga.md"
---
# Integrating Brainfish Widgets with Angular

### 1. **Install the Brainfish Dependency**

Install the Brainfish library in your Angular project using npm:

```bash
npm install @brainfish-ai/web-widget
```

### 2. **Create the Search Widget Component**

Create a new component for the Brainfish search widget. Run the following Angular CLI command to generate the component:

```bash
ng generate component BrainfishSearch
```

In `brainfish-search.component.ts`, add the following code:

```javascript

import { Component, OnInit } from '@angular/core';
import Brainfish from '@brainfish-ai/web-widget';

@Component({
  selector: 'app-brainfish-search',
  templateUrl: './brainfish-search.component.html',
  styleUrls: ['./brainfish-search.component.css']
})
export class BrainfishSearchComponent implements OnInit {
  // Class name for styling
  className = 'custom-class';

  // Initialize the Brainfish search widget when the component initializes
  ngOnInit() {
    Brainfish.Widgets.init({
      widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
    });
  }
}
```

In `brainfish-search.component.html`, add the following code:

```html
<!-- Custom HTML element for the Brainfish search widget -->
<brainfish-search-widget [ngClass]="className"></brainfish-search-widget>
```

### 3. **Create the SlideOver Widget Component**

Similarly, create a new component for the Brainfish SlideOver widget using Angular CLI:

```bash
ng generate component BrainfishSlideOver
```

In `brainfish-slide-over.component.ts`, add the following code:

```javascript

import { Component, OnInit } from '@angular/core';
import Brainfish from '@brainfish-ai/web-widget';

@Component({
  selector: 'app-brainfish-slide-over',
  templateUrl: './brainfish-slide-over.component.html',
  styleUrls: ['./brainfish-slide-over.component.css']
})
export class BrainfishSlideOverComponent implements OnInit {

  // Initialize the Brainfish widget when the component initializes
  ngOnInit() {
    Brainfish.Widgets.init({
      widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
    });
  }

  // Function to open the Brainfish help widget
  openHelpWidget() {
    Brainfish.Widgets.open();
  }
}
```

### Notes

* `widgetKey`: Replace `'YOUR_WIDGET_KEY'` with your actual widget key provided by Brainfish.
* **Styling**: Use the `class` attribute or Angular's `ngClass` directive to apply custom styles.