Get started with plain Angular

You must first create a project in Plasmic.

To view this quickstart with all the IDs and token placeholders replaced with real values, open your project in Plasmic Studio and press the “Code” button in the top toolbar.

Installation

Copy

npm install @plasmicapp/loader-angular
# or yarn add @plasmicapp/loader-angular

For a proper running you may need to set skipLibCheck in your tsconfig.json.

Initialization

Initialize Plasmic with the project ID and public API token. Define this in its own module to make it available globally.

plasmic-init.ts

Copy

import { initPlasmicLoader } from "@plasmicapp/loader-angular";
export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: "PROJECTID",  // ID of a project you are using
      token: "APITOKEN"  // API token for that project
    }
  ],
  // Fetches the latest revisions, whether or not they were unpublished!
  // Disable for production to ensure you render only published changes.
  preview: true,
})

To find your project’s ID and public API token: open the project in Plasmic Studio.

The project ID is in the URL, like: https://studio.plasmic.app/projects/PROJECTID.

The public API token can be found by clicking the Code toolbar button.

Auto load all Plasmic pages

To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a catch-all route in your routes.

"src/app/app.module.ts"
Copy
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { PlasmicModule } from '@plasmicapp/loader-angular';

import { AppComponent } from './app.component';
import { CatchAllComponent } from './catch-all.component';

const routes: Routes = [
  /* ... Your other routes here ... */

  // Add this route to catch all pages
  {
    path: '**',
    component: CatchAllComponent
  }
];

@NgModule({
  // Include the CatchAllComponent in your declarations
  declarations: [AppComponent, CatchAllComponent],
  imports: [BrowserModule, PlasmicModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule {}

"src/app/app.component.ts"
Copy
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // Use the routing inside the app-root
  template: ` <router-outlet> </router-outlet> `
})
export class AppComponent {}

Create the following catch-all component in your components.

"src/app/catch-all.component.ts"
Copy
import { Component } from '@angular/core';
import { ComponentRenderData } from '@plasmicapp/loader-angular';
import { PLASMIC } from './plasmic-init';

@Component({
  selector: 'catch-all',
  template: `
    <plasmic-root-provider *ngIf="!loading && prefetchedData" [loader]="loader" [prefetchedData]="prefetchedData">
      <plasmic-component [component]="path"></plasmic-component>
    </plasmic-root-provider>
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="!loading && !prefetchedData">Error...</div>
  `
})
export class CatchAllComponent {
  loader = PLASMIC;
  path: string = '';
  loading: boolean = true;
  prefetchedData: ComponentRenderData | null = null;

  constructor() {}

  ngOnInit() {
    (async () => {
      this.path = window.location.pathname;
      this.prefetchedData = await PLASMIC.maybeFetchComponentData(this.path);
      this.loading = false;
    })();
  }
}

Render a single Plasmic page or component

Note: You can instead auto-load all Plasmic pages at the correct routes (recommended) rather than manually loading individual pages—see previous section.

Import PlasmicModule into your AppModule.

src/app/app.module.ts
Copy
import { PlasmicModule } from '@plasmicapp/loader-angular';

@NgModule({
  declarations: [...],
  imports: [PlasmicModule, ...],
  ...
})
export class AppModule {};

For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.) These are served from a globally replicated instance of the AWS Cloudfront CDN.

COMPONENT_OR_PAGEROUTE refers to the name of the page or component that you want to render, such as Winter22LandingPage. If it’s a page, you can also use the route you assigned the page in Plasmic, like /landing.

src/app/app.component.ts
Copy
import { PLASMIC } from './plasmic-init';

@Component({
  selector: 'app-root',
  template: `
    <plasmic-root-provider [loader]="loader">
      <plasmic-component component="COMPONENT_OR_PAGEROUTE"></plasmic-component>
    </plasmic-root-provider>
  `
})
export class AppComponent {
  ...
  loader = PLASMIC;
}

Add custom code components

Learn how to register custom Angular components from your codebase for drag-and-drop within the Plasmic editor:

Register custom Angular components

There’s much more to explore!

Perform server-side rendering.
Render different variants.
Override the content or props.
Add dynamic behavior.

Continue learning the API in the docs.

Was this page helpful?

Give feedback on this page