This is the second article in the Angular / Prismic series. The first article saw you launch the default Angular project and integrate a simple homepage. In this article we will expand on this and add Prismic's slices feature to allow content authors to mix and match different content blocks to expand the homepage.

This article requires that you have already gone through the Getting Started article. Here is the project code you need to start this tutorial but we suggest going through the Getting Started article if you have not already.

Add Slices to our Homepage Custom Type

Let's start by adding our Slices to the Homepage Custom Type. Head to your Prismic repository, navigate to your Custom Types, then click to edit your Homepage type.

Start by activating the Slice Zone on your type.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b0621dc4-d076-4660-ab73-69ba57bcb22e/VideoMP4(1318x740).mp4

For the sake of time & space, we won't go through how to setup the Slices manually. Instead here is the final JSON code for the Homepage Custom Type that you can paste into the JSON Editor.

{
  "Main": {
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "Title",
        "placeholder": "Enter the title..."
      }
    },
    "tagline": {
      "type": "StructuredText",
      "config": {
        "single": "paragraph, strong, em",
        "label": "Tagline",
        "placeholder": "Enter the tagline..."
      }
    },
    "banner_image": {
      "type": "Image",
      "config": {
        "constraint": {
          "width": 2000
        },
        "thumbnails": [],
        "label": "Banner Image"
      }
    },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "choices": {
          "text_section": {
            "type": "Slice",
            "fieldset": "Text Section",
            "description": "Simple text section",
            "icon": "text_fields",
            "non-repeat": {
              "rich_text": {
                "type": "StructuredText",
                "config": {
                  "multi": "paragraph, preformatted, heading2, heading3, strong, em, hyperlink, list-item, o-list-item",
                  "allowTargetBlank": true,
                  "label": "Rich Text",
                  "placeholder": "Text..."
                }
              }
            },
            "repeat": {},
            "display": "list"
          },
          "image_gallery": {
            "type": "Slice",
            "fieldset": "Image Gallery",
            "description": "A collection of images, each with a description and an optional link",
            "icon": "image",
            "non-repeat": {
              "gallery_title": {
                "type": "StructuredText",
                "config": {
                  "single": "heading2, heading3",
                  "label": "Gallery Title",
                  "placeholder": "Image Gallery Title..."
                }
              }
            },
            "repeat": {
              "image_description": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Image Description",
                  "placeholder": "Image description..."
                }
              },
              "image": {
                "type": "Image",
                "config": {
                  "constraint": {
                    "width": 727,
                    "height": 402
                  },
                  "thumbnails": [],
                  "label": "Image"
                }
              }
            }
          },
          "image_highlight": {
            "type": "Slice",
            "fieldset": "Image Highlight",
            "description": "A section to highlight an image with title, text, and optional link",
            "icon": "star",
            "non-repeat": {
              "featured_image": {
                "type": "Image",
                "config": {
                  "constraint": {
                    "width": 727,
                    "height": 402
                  },
                  "thumbnails": [],
                  "label": "Featured Image"
                }
              },
              "title": {
                "type": "StructuredText",
                "config": {
                  "single": "heading2",
                  "label": "Image Title",
                  "placeholder": "Featured Title..."
                }
              },
              "headline": {
                "type": "StructuredText",
                "config": {
                  "single": "heading3",
                  "label": "Image Headline",
                  "placeholder": "Featured Headline..."
                }
              }
            },
            "repeat": {}
          }
        }
      }
    }
  }
}

You should now have three Slice options that your content author will be able to mix-and-match.

Save your Homepage type, then navigate to the content page. Click to edit your Homepage document and add at least one instance of each Slice to your document.

Once you're done, Save and Publish your document.

Serve the Prismic Site application

If you don't already have it up and running, launch the prismic-site project. From the root directory of the project in your terminal, run the following command.