---
title: "Angular"
section: "Libraries: Web"
route: /webangular
account: {accountId}
bruce_api: https://{accountId}.api.nextspace.host
guardian_api: https://guardian.nextspace.host
---
# Angular

We don't develop using Angular but we've made an example to help you get started.

## Starter kit

As Typescript setups typically involve a number of libraries working together to produce a package that can be served. We've created a starter kit for you to use.

[Download starter kit](/res/samples/web-angular-example.zip)

Once you've downloaded and extracted the ZIP, run the following commands to start it up.

```bash
npm i -g @angular/cli
npm i
ng serve
```

Please give the initial setup some time. It will take a while to download all the dependencies and prepare the Angular app.

![](/res/web-react/example.png)

The example will load a list of bookmarks for you to select from, and render some point Entities that you can click.

Within the "app.component.ts" file you can edit the parameters to change the initial view to match your own account and data.

```typescript
ENVIRONMENT.PARAMS = {
    ...ENVIRONMENT.PARAMS,

    // Replace with your accountId, found in your account url.
    // Eg: "https://my-account-id.nextspace.host" would mean "my-account-id" is your ID.
    // The ZIP example will be pointed at a test account.
    accountId: "<REPLACE_ME>",

    // Replace with UAT or PROD for client data.
    // DEV is for Nextspace only data.
    // The ZIP example will be set to DEV until you change it!
    env: Api.EEnv.DEV,

    // Required if your Project View is restricted.
    sessionId: ""
};

const viewer = new Cesium.Viewer("VIEWER");
ViewerUtils.InitViewer({
    viewer: viewer,
    // Set to true if you're seeing default Cesium widgets.
    destroyWidgets: false,
    styleContainer: true,
    nextspaceWidgets: true
})

ViewRenderEngine.Render({
    viewer: viewer,
    bookmarkId: "<REPLACE_ME>",
    viewId: "<REPLACE_ME>",
    // Skip the transition for first bookmark render to avoid flying every page reload!
    skipTransition: true
});
```

---

Urls on this page are resolved for account `{accountId}`.
Site index: https://docs.nextspace.host/llms.txt · whole site in one file: https://docs.nextspace.host/llms-full.txt
Human-readable version of this page: https://docs.nextspace.host/webangular