Magnolia Angular Component Library

Package name

@magnolia/cli-angular-prototypes

Repository

@magnolia/cli-angular-prototypes

Latest version

Magnolia Angular Component Library latest version tag

Changelog

CHANGELOG.md

The Magnolia Angular Component Library is a ready-to-use set of Angular-based components built for modern, headless website development with Magnolia.

It’s designed to work seamlessly with Magnolia CLI’s Create Component plugin and Create Page plugin, helping you build scalable, customizable, and maintainable front-end applications.

For shared key features, styling information, and component usage guidelines, see the Magnolia Component Library page.

Getting started

  1. Jumpstart a Magnolia project with an Angular application.

    • Community Edition

    • DX Core

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

  2. Next, make sure your mgnl.config.js is configured to use the Magnolia Angular Component Library. The most important is the framework property used by the create-page and create-component plugins:

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

export default {
  ...
  plugins: [
    new CreatePagePlugin({
      pagesSpaPath: './spa/src/templates/pages',
      framework: '@magnolia/cli-angular-prototypes', (1)
    }),
    new CreateComponentPlugin({
      componentsSpaPath: './spa/src/templates/components',
      framework: '@magnolia/cli-angular-prototypes', (1)
    })
  ],
  ...
};
    1 The NPM package that provides the Magnolia Angular Component Library.

Available components

The Angular Component Library contains a collection of base components. Each component includes:

  • a dialog definition

  • a template definition

  • an implementation

You can customize, extend, or use them as a starting point for your own components.

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