This is the fifth article in the Angular / Prismic series. In the previous four articles, we launched the default Angular project, integrated Prismic, and added a homepage along with a couple of content pages and a navigation bar.

This article requires that you have already gone through the previous four articles. If you have not already gone through them, here are the links.

  1. Getting Started wit Prismic & Angular
  2. Adding Slices to your Homepage
  3. Adding Routes to your app
  4. Adding a Navigation bar

Here is the project code you need to start this tutorial but we suggest going through these articles if you have not already.

In this article we will expand on this and add the ability to Preview changes on our site as well as adding in-website edit buttons.

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.

ng serve --open

This will launch your project and you should see your site as we left it in the last article.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4bd6eac9-9a05-4c83-948a-901395456721/LargeGIF(1274x812).gif

Adding the Preview functionality

Let's start by adding previews to our application.