> ## Documentation Index
> Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

> Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with Angular.

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications and integrate a rich, customizable and ready-to-use real-time UI In-App notification center in Angular apps.

## Requirements

To follow the steps in this quickstart, you'll need:

* A Novu account. [Sign up for free](http://web.novu.co/?utm_campaign=docs-gs-quick-angluar) if you don’t have one yet
* Angular CLI (Command Line Interface) installed on your machine
* Angular version 15 or higher

You can also [view the completed code](https://github.com/novuhq/angular-quickstart) of this quick start in a GitHub repo.

## Create a new Angular app

To create a new Angular app, open a terminal or command prompt and  run the following command:

```bash theme={null}
ng new my-app
```

Here, `my-app` is the name of your new Angular app.  This command will create a new Angular app with a basic file structure and all the necessary dependencies installed.

Navigate to the app directory by running the following command:

```bash theme={null}
cd my-app
```

Once you are in the app directory, you can start the development server by running the following command:

```bash theme={null}
ng serve
```

This command will start the development server and launch your app in the default browser. You can access your app by navigating to `http://localhost:4200/`.

<Frame
  caption="This command will start the development server and launch your app in the default browser. You can access your app by navigating to `http://localhost:4200/`.
"
>
  <img src="https://mintcdn.com/novu-v2-docs/sGuc2UrECiU5eWcY/images/angular.png?fit=max&auto=format&n=sGuc2UrECiU5eWcY&q=85&s=915f07c816433c181bd46996df29e5fe" width="2000" height="1045" data-path="images/angular.png" />
</Frame>

## Install Novu Angular Notification Center Package

The Novu Angular package provides a Angular component wrapper over the web component that you can use to integrate the notification center into your Angular application.

Navigate to the root directory of your Angular application. Now install the Angular Notification Center package by running the following command in your terminal:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm i @novu/notification-center-angular
  ```

  ```bash npm theme={null}
  npm i @novu/notification-center-angular
  ```

  ```bash yarn theme={null}
  yarn add @novu/notification-center-angular
  ```
</CodeGroup>

## Configuring Application Environments

Using the Angular CLI, start by running the [generate environments command](https://angular.io/cli/generate#environments-command)
shown here to create the `src/environments/`directory and configure the  project to use these files.

```bash theme={null}
ng generate environments
```

Navigate to `my-app/src/environments/environment.ts`  and add the following variables: `subscriberId`, `applicationIdentifier`

* **`applicationIdentifier`** can be found here: [https://web.novu.co/settings](https://web.novu.co/settings)
* **`subscriberId`** can be found here: [https://web.novu.co/subscribers](https://web.novu.co/subscribers)

```tsx theme={null}
export const environment = {
  production: false,
  subscriberId: '',
  applicationIdentifier: '',
};
```

Copy and paste the same code into `my-app/src/environments/environment.development.ts`

These variables are needed for the `GET` request our notification center will make to Novu’s API to push notifications into the feed.

## Adding Novu Module

Now, navigate to the `app.module.ts` file `(my-app/src/app/app.module.ts)`

* Import `CUSTOM_ELEMENTS_SCHEMA` from `'@angular/core'`
* Add Novu’s notification center module

```jsx theme={null}
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NotificationCenterModule } from '@novu/notification-center-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NotificationCenterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Head to `my-app/src/app/app.component.ts` file.

⚠️ The `app.component.ts` file is a critical part of an Angular application, as it  defines the root component and provides the foundation for the rest of  the app's functionality.

Now, we are going to import the `environment` variables to make them accessible in the `app.component.html` and the `styles` properties of our notification center

(there are many properties, but you can discover them later on)

```tsx theme={null}
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'my-app';

  subscriberId = environment.subscriberId;
  applicationIdentifier = environment.applicationIdentifier;

  styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white',
        },
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '',
        '&:hover': { backgroundColor: '' },
        '.some_class': { color: '' },
      },
    },
    layout: {
      root: {
        backgroundColor: '',
      },
    },
    popover: {
      arrow: {
        backgroundColor: '',
        border: '',
      },
    },
  };

  sessionLoaded = (data: unknown) => {
    console.log('loaded', { data });
  };
}
```

The Angular component is generated as a wrapper around the original React component. This approach is clever, as it allows Novu's engineers to focus on creating and developing things in the React way.

Additionally, many other frameworks can still use the created components using the wrapping approach.

Now head to the `my-app/tsconfig.json` file, we’re going to add `"allowSyntheticDefaultImports": true` to the `compilerOptions` array.

```diff theme={null}
{
  "compilerOptions": {
+   "allowSyntheticDefaultImports": true,
  }
}
```

## Use & Display The Notification Center Component

Open the `my-app/src/app/app.component.html` file.

This file contain the CSS code along with the HTML one - ideally you should separate the CSS to the `my-app/src/app/app.component.css` file, but it’s not mandatory.

We will add our notification center to the .toolbar div.

Paste the following into your `app.component.html` file:

```jsx theme={null}
  <div id="bell-icon">
    <notification-center-component
      [subscriberId]="subscriberId"
      [applicationIdentifier]="applicationIdentifier"
      [sessionLoaded]="sessionLoaded"
      [styles]="styles"
    ></notification-center-component>
  </div>
```

And in the `<style>` tag, we also want to add some margin to our `#bell-icon` so that it looks good next to the other icons.

```css theme={null}
.toolbar #bell-icon {
  height: '';
  margin: 0 16px;
}
```

Run your app again. Now you should see the bell icon (the notification center) in the toolbar section of your app.

You should now see a **bell button** that opens the notification center when clicked. This bell can be customized to your preference.

<Frame caption="">
  <img src="https://mintcdn.com/novu-v2-docs/sGuc2UrECiU5eWcY/images/bell-angular.png?fit=max&auto=format&n=sGuc2UrECiU5eWcY&q=85&s=ee48fe5492f9a0e0c90c6ba2ac75add7" width="2000" height="1045" data-path="images/bell-angular.png" />
</Frame>

<Frame caption="This bell can be customized to your preference">
  <img src="https://mintcdn.com/novu-v2-docs/sGuc2UrECiU5eWcY/images/bell-ui-angular.png?fit=max&auto=format&n=sGuc2UrECiU5eWcY&q=85&s=36898a48320a9cd15208667e0f43b580" width="2000" height="1045" data-path="images/bell-ui-angular.png" />
</Frame>

Note: There are no notifications because none has been triggered yet. When notifications are sent to a subscriber, it will show up in the UI. Next, we'll learn how to trigger notifications.

* [Angular Notification Center Example Repo](https://github.com/novuhq/examples/tree/main/novu-angular-notification-center)

## Create A Workflow

The first step to trigger notifications is to create a workflow. A workflow is like a map that holds the entire flow of messages sent to the subscriber.

The recipients of a triggered notification are called subscribers.

The workflow includes the following:

* Workflow name and Identifier
* Channel tailored content:

| Channel<br /><br /> | Content Style<br /><br /> | Custom Variables<br />`{{handlebars}}` format |
| ------------------- | ------------------------- | :-------------------------------------------: |
| **Email**           | HTML                      |                       ✅                       |
|                     | Visual Editor             |                       ✅                       |
| **SMS**             | Text                      |                       ✅                       |
| **Chat**            | Text                      |                       ✅                       |
| **In-App**          | Text                      |                       ✅                       |
| **Push**            | Text                      |                       ✅                       |

Please proceed to create a workflow.

1. Click **Workflows** on the left sidebar of your Novu dashboard.
2. Click the **“Create Workflow”** button on the top right.
3. The name of the new workflow is currently "Untitled." Rename it to a more suitable title.
4. Select **"In-App"** as the channel you want to add.

<Frame caption="Select the in-app channel">
  <img src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/vue/in-app-vue.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=0100286c3dc7d45895ab394e2bc203b7" width="2000" height="1070" data-path="images/quickstarts/vue/in-app-vue.png" />
</Frame>

5. Click on the recently added In-App channel and configure it according to your preferences. Once you’re done, click Update to save your configuration.

<Frame caption="Configure it as per your requirements and then save it">
  <img src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/vue/configure-in-app-vue.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=363facc8c29747f8f60bbd478168f283" width="2000" height="1378" data-path="images/quickstarts/vue/configure-in-app-vue.png" />
</Frame>

I’ll briefly explain the function of each label in the image above.

* **1-Preview**: Shows you a glimpse of how each notification item will look like in the Notification Center UI.
* **2-Avatar:** If turned on, each notification item will show the avatar of the subscriber.
* **3-Action:** With this, you can add a primary and secondary call to action button to each notification item.
* **4-Notification Feeds:** This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
* **5-Redirect URL** - This is the URL to which a subscriber can be directed when they click on a notification item.
* **6-Filter** - This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber's online status to send them an email if they were online within the last hour. Read [more about filters](https://docs.novu.co/platform/step-filter/#subscriber-seen--read-filters).

Feel free to add only text for now and rename the workflow to `Onboarding In App`. It automatically creates a slug-like Identifier that will be needed in later steps to trigger a notification.

<Frame caption="Configure it as shown in this image">
  <img src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/vue/configuration-vue.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=717b917d1f08f5c66888f32d7a086d50" width="2000" height="1387" data-path="images/quickstarts/vue/configuration-vue.png" />
</Frame>

<Frame caption="Rename the workflow as shown here">
  <img src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/vue/rename-vue.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=d1be25a2e989d34bbb88852576b3145f" width="2000" height="1112" data-path="images/quickstarts/vue/rename-vue.png" />
</Frame>

Next, we’ll learn how to create subscribers on Novu - *Recipients of Notifications*

## Create A Subscriber

Click **Subscribers** on the left sidebar of the [Novu dashboard](https://web.novu.co/subscribers?utm_campaign=docs-quick-angluar) to see all subscribers. By default, the dashboard will display a subscriber, as you were added automatically during sign-up.

<Frame caption="Subscribers from the left sidebar shows all the subscriber">
  <img src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/common/sub-nodejs.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=b9f861bdabce3e746d9181b81e104d21" width="2000" height="933" data-path="images/quickstarts/common/sub-nodejs.png" />
</Frame>

Now, let's create a subscriber on Novu.

Novu has a plethora of backend SDKs (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin) to choose from to create a subscriber programmatically. This is the recommended method.

```jsx theme={null}
import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.identify('123', {
  firstName: 'Emil',
  lastName: 'Pearce',
  returnUser: true,
});
```

Obtain your API key from your [Novu dashboard.](https://web.novu.co/settings?utm_campaign=docs-quick-angluar) Replace `<NOVU_API_KEY>` with it.

Now check your Novu dashboard. You should see the recently created subscriber.

You can also update the subscriber info like so:

```jsx theme={null}
import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.update('123', {
  firstName: 'Emil', // new first name
  lastName: 'Pearce', // new last name
});
```

## Trigger A Notification

To trigger a notification, simply run the code below with the correct credentials.

```jsx theme={null}
import { Novu } from '@novu/node';

const novu = new Novu('<NOVU_API_KEY>');

await novu.trigger('onboarding-in-app', {
  to: {
    subscriberId: '132',
  },
});
```

`onboarding-in-app` is the workflow identifier we created earlier.

Ensure the `subscriberId` value in the backend code that triggers the notification matches the `subscriberId` in your `my-app/src/environments/environment.ts` code.

```jsx theme={null}
export const environment = {
  production: false,
  subscriberId: '',
  applicationIdentifier: '',
};
```

Check your app again. You should see the recently triggered notification!

## Conclusion

Great job! If you've reached this point, you should now have successfully set up the notification center, created a subscriber, a workflow, configured a channel provider and triggered a notification in your Angular application.