Add an About Box to an Angular App

Live example

This is the About box of AboutTheApp itself. Switch the variant to see other layouts. The code below renders exactly this box. For your own app, change the alias.

About box

HTML

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Add it to an Angular app in 4 steps

The About box is a Web Component, so it needs no Angular library. Its content comes from AboutTheApp and your app only references it by alias.

Keep the schema in a small component

CUSTOM_ELEMENTS_SCHEMA turns off the unknown element check for the whole component, including typos in other tags. Put the About box into a small component of its own, like the footer above.

1
Create your product
Create it in AboutTheApp and note its alias. The Integrate panel on the product card has the same code as the live example, already filled in with your alias.
2
Load the script
Add the script tag to src/index.html.
3
Allow the custom element
Add CUSTOM_ELEMENTS_SCHEMA to schemas of the standalone component that contains the tag. In an app built with NgModules, add it to the module instead.
4
Place the element
Use <about-the-app alias="aboutthe.app"></about-the-app> in the component template.

footer.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-footer",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<about-the-app alias="aboutthe.app" variant="footer"></about-the-app>`,
})
export class FooterComponent {}

Pass the app version with [attr.version]

Bind the version with [attr.version], not [version]. With CUSTOM_ELEMENTS_SCHEMA, Angular sets [version] as a DOM property, which the About box doesn't read. [attr.version] sets the HTML attribute.

The example reads the version from package.json, which needs resolveJsonModule in tsconfig.json. You can also keep the version in an environment file. Release notes appear when the same version exists in the product's version catalog and is public or is private and the box is unlocked with an unlock code.

footer.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import packageJson from "../../package.json";

@Component({
  selector: "app-footer",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<about-the-app alias="aboutthe.app" variant="footer" [attr.version]="version"></about-the-app>`,
})
export class FooterComponent {
  version = packageJson.version;
}

Choose the layout and the look

The variant attribute picks the layout: card (default), footer, compact, dialog, support, version, maker, credits or link. You can try each one in the live example above.

If you set visual-style="host" and palette="host", the box takes the font, corner radius and colors from your app. If you're not sure what an About screen should contain, read what to show on an About page.

Frequently asked questions

Why does Angular say "about-the-app is not a known element"?

Angular checks every tag in a template against its own components. Add CUSTOM_ELEMENTS_SCHEMA to schemas of the component or module that uses about-the-app and the error goes away.

Do I have to add CUSTOM_ELEMENTS_SCHEMA everywhere?

No. Only the components or modules whose templates contain the about-the-app tag need it. In most apps that's a single footer or About component.

Does the About box work with Angular SSR?

Yes. The server renders the element as an empty tag and the script fills it in the browser once it loads. The box content is therefore not part of the server-rendered HTML.

AboutTheApp

Ready to add your own About box?

Create a free AboutTheApp product and get your integration code right away.

Create your first product

Related guides

🔢App content