Box UI Elements with Angular

In my previous post, I explored the integration of Box UI Elements with Vue 3. Now let’s take a look at integrating them with another popular frontend framework: Angular. In this article, I’ll demonstrate how to build a universal component capable of displaying six different Box UI Element thanks to passing a configuration object. If you’d like to see a demo app, the code is available in this repository.

Prerequisites: Box developer account; node.js

Note: This post applies to Angular 2+ apps. In my demo, I used v15.0.0

What are UI Box Elements?

Quick recap: UI Box Elements are a set of pre-built UI components that allow developers to add elements of the main Box web application into their own applications, e.g., upload content, preview files, and folders stored in Box.

A view in Angular demo app featuring Content Uploader component

Steps to create the app

1. Set up the Angular app
2. Create the Box app in the Developer Console
3. Write a service that injects CDN assets to the document’s head
4. Create a new Angular component using the CLI
5. Initialize the Box UI Element
6. Display the selected Box UI Element

⚠️ Note: Instead of importing code from the CDN, you can also install the package directly into your project. Make sure to add box-ui-elements peer dependencies to your main package.json. Then, in the angular.json file, import JS and CSS code from node modules.

1. Set up the Angular app

Install the Angular CLI and create a new project. Choose a name for your project and adjust settings. In my demo app, I included SCSS and routing.

npm install -g @angular/cli
ng new my-app

For additional information, visit the Angular documentation site. Once the project is created, change the directory and run it!

cd <my-app>
ng serve --open

The project default link is http://localhost:4200, and we’ll use it in the next step to set CORS domains in the Box Developer Console.

2. Create the Box app in the Developer Console

Log into your developer account and in the bottom left corner, click Dev Console. If you don’t have an account, visit the signup page. Fill out the text boxes and click Get Started. You’ll need to set up two-factor authentication to make changes to apps.

Now you can create a new app or use an existing one.

Set up CORS

Go to your app’s configuration tab, scroll down to CORS domains, and paste the local address of your Angular project: http://localhost:4200. Remember to remove the trailing slash.

Set access rights

This step is useful when using, for example, the Content Uploader component. By default, access from an external app is read-only; optionally, to allow file upload or removal from your custom app, navigate to Applications Scopes and check the Write all files and folders stored in Box option.

Generate a token and add it to your app

Scroll to the Developer Token section and generate one. Remember, the token is valid for just one hour. ⚠️ When the token is no longer valid, go back to the Box Developer Console to revoke it and replace the old one in your project.

In the src folder of the Angular project, create an environment folder and environment.ts file to store the developer token for authentication.

export const environment = {
  production: false,
  BoxDeveloperToken: 'YourDeveloperToken'
};

3. Write a service that injects CDN assets into the document’s head

Inside the app folder, let’s create a service folder containing a head.service.ts file. The service will be responsible for loading scripts and stylesheet links to the document’s head using Renderer2. To achieve this, we need to import:

• Renderer2: “Extend this base class to implement custom rendering.”
• DOCUMENT: “A dependency injection token representing the main rendering context. In a browser this is the DOM Document.”
• Inject: “Parameter decorator on a dependency parameter of a class constructor that specifies a custom provider of the dependency.”
• Injectable: “Decorator that marks a class as available to be provided and injected as a dependency.”

The HeadService contains four public methods. The first two methods load the given resource; the remaining two methods check to see if the given resource is already loaded.

The HeadService has to be declared in the app.module.ts file.

Note: For convenience, I also adjusted tsconfig.json by adding path aliases. Thanks to this, you can use ‘@app/path/to/file’ instead of a relative path. You may need to restart the server and your editor after applying this change.

"baseUrl": "./",
"paths": {
  "@app/*": ["./src/app/*"],
  "@environment/*": ["./src/environment/*"]
},

4. Create a new Angular component using the CLI

Using the Angular CLI, create a box component. For a clearer project structure, it’s worth creating a components folder to store all of them in one place.

ng generate component box

I changed the generic component selector from app-box-component to box-component.

This component is going to be a generic wrapper that accepts configuration object, with properties like the component name, folder id, or links to the CDN resources for a particular Box UI Element.

5. Initialize the Box UI Element

To restrict the values of the component name, I created an additional file that includes an enum with content UI Elements names. Visit our developer documentation to read more about each of them and check out additional features.

Next, import our box-component:

• BoxComponentsTypes: to access the enum with UI Elements names
• environment: to access the developer token
• HeadService: the service created in step 3 to inject CDN resources
• Input: to define our component configuration object
• AfterViewInit: hook for initialization of the component

The component accepts a componentData input; its interface includes the fonderId, boxCdnJS, boxCdnCss, and name of the component (values declared in the BoxComponentsType enum).

The passed component name in the initialiseComponent method is dynamic and can initialise one of six components defined in BoxComponentsTypes enum.

Lastly, in the component’s HTML file, provide a container with an id related to the component name.

6. Display the selected Box UI Element

In order to display the generic Box component created in the previous step, pass the configuration object matching the BoxComponentInterface. To get the CDN links for one of the Box UI Elements, go to the documentation site. Since we are building an app that has no React library included, choose the script link marked as “JS with React.” If you’re aiming to utilise all Box UI Elements in your app, an improvement worth implementing is keeping all CDN links in one file.

In my demo app, I created a separate folder for pages and added a new component, content-explorer. In the app-routing.module.ts file, I also defined it as a route.

Finally, in the content-explorer HTML file bind the configuration object with component data input.

To display a different component, like the Content Uploader, just simply create a new component, similarly declare one of the BoxComponentTypes, and add appropriate CDN links to the configuration object.

That’s it, happy coding!

For more information go to our developer documentation site. Feel free to reach out to us on the developer forum for support, or via Box Pulse to make suggestions on how to improve Box UI Elements.