CLI Angular prototypes

This package can be used for Angular projects.

Package name

@magnolia/cli-angular-prototypes

Repository link

@magnolia/cli-angular-prototypes

Latest version

Magnolia CLI angular prorotypes latest version tag

Changelog link

CHANGELOG.md

Prototypes in the package

For more details, click the prototype name.

Example usage

To see how to set and use the @magnolia/cli-angular-prototypes, you can jumpstart a project based on the headless/angular-starter/ce template.

  1. Jumpstart a new project based on the template.

    npx @magnolia/cli@latest jumpstart -t "headless/angular-starter/ce"

    The command downloads and creates a new project.

    The mgnl.config.js file created:

    import CreatePagePlugin from "@magnolia/cli-create-page-plugin";
import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";
...

export default {
  ...
  plugins: [
    new CreatePagePlugin({
      pagesSpaPath: './spa/src/app/templates/pages',
      framework: '@magnolia/cli-angular-prototypes', (1)
      prototype: 'mhd', (2)
      templateArgs: {
        removeExtension: true, (3)
        namedImport: true (4)
      },
      templateData: {
        port: '8181'
      }
    }),
    new CreateComponentPlugin({
      componentsSpaPath: './spa/src/app/templates/components',
      framework: '@magnolia/cli-angular-prototypes', (1)
      prototype: 'mhd', (2)
      templateArgs: {
        removeExtension: true, (3)
        namedImport: true (4)
      }
    }),
    ...
  ],
  type: "ts",
  lightModulesPath: "./light-modules",
  lightModule: "spa-lm",
  componentMappingFilePath: "./spa/src/magnolia.config.ts"
};
    1 The framework prototypes package.
    2 The prototype available in the framework prototypes package chosen.
    3 Removes the extension in import strings.
    4 Uses named imports instead of default.

  2. Create a new page.

    npm run mgnl -- create-page main

    Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

    npm run mgnl "--" ...

  3. Files created:

    • /<project-path>/light-modules/spa-lm/dialogs/pages/main.yaml

      Click to expand or collapse

      label: Page Properties
form:
  properties:
    title:
      label: Title
      $type: textField
      i18n: true

    • /<project-path>/light-modules/spa-lm/templates/pages/main.yaml

      Click to expand or collapse

      title: main
baseUrl: http://localhost:8181
routeTemplate: "/{language}{{@path}}"
dialog: spa-lm:pages/main

renderType: spa
class: info.magnolia.rendering.spa.renderer.SpaRenderableDefinition

areas:
  main:
    title: Main Area

  extras:
    title: Extras Area

    • /<project-path>/spa/src/app/templates/pages/main/main.component.html

      Click to expand or collapse

      <div class="main">
  <div>[main Page]</div>
  <h1>{{title || metadata['@name']}}</h1>

  <main>
    <div>[Main Area]</div>
    <div editable-area  [content]="main" [parentTemplateId]="metadata['mgnl:template']"></div>
  </main>

  <div>
    <div>[Secondary Area]</div>
    <div editable-area  [content]="extras" [parentTemplateId]="metadata['mgnl:template']"></div>
  </div>
</div>

    • /<project-path>/spa/src/app/templates/pages/main/main.component.scss

    • /<project-path>/spa/src/app/templates/pages/main/main.component.ts

      Click to expand or collapse

      import { Component, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { EditableArea } from '@magnolia/angular-editor';

@Component({
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
  standalone: true,
  imports: [EditableArea, RouterLink]
})
export class main {
  @Input() title?: string;
  @Input() main!: object;
  @Input() extras!: object;
  @Input() metadata!: Record<string, string>;
}

  4. The modified file with the componentMapping object:

    • /<project-path>/spa/src/magnolia.config.ts

      Click to expand or collapse

      import { main as mainPage } from './app/templates/pages/main/main.component'
...

export const config = {
    'componentMapping': {
      ...
      "spa-lm:pages/main": mainPage
   }
  };

  5. Create a new component and make it available in the main page create before.

    npm run mgnl -- create-component hero -a main

    Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

    npm run mgnl "--" ...

  6. Files created:

    • /<project-path>/light-modules/spa-lm/dialogs/components/hero.yaml

      Click to expand or collapse

      label: hero
form:
  properties:
    text:
      label: hero Text
      $type: textField
      i18n: true

    • /<project-path>/light-modules/spa-lm/templates/components/hero.yaml

      Click to expand or collapse

      title: hero
dialog: spa-lm:components/hero

    • /<project-path>/spa/src/app/templates/components/hero/hero.component.html

      Click to expand or collapse

      <h2>{{text}}</h2>

    • /<project-path>/spa/src/app/templates/components/hero/hero.component.scss

    • /<project-path>/spa/src/app/templates/components/hero/hero.component.ts

      Click to expand or collapse

      import { Component, Input } from '@angular/core';

@Component({
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss'],
  standalone: true
})
export class hero {
  @Input() text: any;
}

  7. The modified main page file:

    • /<project-path>/light-modules/spa-lm/templates/pages/main.yaml

      Click to expand or collapse

      ...
areas:
  main:
    title: Main Area
    availableComponents:
      hero:
        id: spa-lm:components/hero
...

  8. The modified file with the componentMapping object:

    • /<project-path>/spa/src/magnolia.config.ts

      Click to expand or collapse

      import { hero as heroComponent } from './app/components/templates/hero/hero.component'
...

export const config = {
    'componentMapping': {
      ...
      "spa-lm:components/hero": heroComponent
   }
  };
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules