Get started with plain Angular

Installation

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

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 public API token: open the project in Plasmic Studio, and click the Code toolbar button.

Render a single Plasmic page or component

Import PlasmicModule into your AppModule.

src/app/app.module.ts

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.)

src/app/app.component.ts

import { PLASMIC } from './plasmic-init';

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

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"

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"

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"

import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { ComponentRenderData } from '@plasmicapp/loader-angular';
import { PLASMIC } from 'src/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(private location: Location) {}

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

There’s much more to explore!

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

Continue learning in the docs.