Render Storyblok Stories Dynamically in Angular

This short tutorial will show us how to start making a real website with Angular and Storyblok. We will add a layout that includes a navigation bar and a footer to our website to make it look better. We will also see how we can add new pages and render them dynamically according to the added components inside them.

Requirements

This is a part of the Ultimate Tutorial Guide for Angular. You can find the previous part of the series here, which shows you how to integrate Storyblok and Angular in 5 minutes. We recommend you take a look at that tutorial before starting this one.

Adding a Layout

Let’s add a layout to our website by creating a static navigation bar and a footer. We will look at how to create dynamic navigation bars in an upcoming tutorial of this series.

Make two components in your components folder, navigation and footer.js

Add the following code to component -

Similarly, add the following code to your Footer component -

Now we need to add our layout to our app component file. Add the following code to the app.component.html file -

        
      <app-navigation></app-navigation>
<div class="dsc-skeleton-content">
  <div *ngIf="story.content">
    <ndc-dynamic [ndcDynamicComponent]="components[story.content.component]" [ndcDynamicInputs]="story.content">
    </ndc-dynamic>
  </div>
</div>
<app-footer></app-footer>

    

Now, we need to add the story name to the API call.

Replace the app.component.ts file code with the following -

        
      import { Component, OnInit } from '@angular/core';
import { StoryblokService } from './services/storyblok.service';
import { Components } from './components';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  story = {content: null, name: ''};
  components = Components;
  storyName="";

  constructor(private storyblokService: StoryblokService) {
    this.storyName=location.pathname!="/"?location.pathname:"home";
    window.storyblok.init();
    window.storyblok.on(['change', 'published'],  function() {
      location.reload()
    });
    window.storyblok.on('input', (event) => {
      if(this.story && event.story.content._uid === this.story.content._uid){
        this.story = event.story
      }
    })
  }

  ngOnInit() {
    if (location.pathname)
      this.storyblokService.getStory(this.storyName, {version: 'draft'})
        .then(data => this.story = data.story);
    }
}

    

After hitting save, our home story should look something like this -

Right now, we can see that we have three entries in the navigation menu - About, Blog, and Services. But we don’t have any stories created for them. So, if we try to go on any of those links from our browser, we will get 404 - This page could not be found. Let’s add these stories to our space.

Adding pages to Storyblok

To create a new story, we need to go to the Content section {1} in our space. Once we are there, we will see a button Create New {2} on the top right corner. Click on the button. We will see two options - one to create a new story and another one to create a new folder. Let’s click on Story {3}

Once we click on it, we will get a popup with a couple of fields to create a new story. Let’s create an about page. Fill the Name {1} and Slug {2} fields as in the image below -

Once we hit Create we will get a new story added, and we will have a page with just our layout.

We can similarly create the Blog and the Services page as well. These stories are getting loaded with the […slug].js file, which is catching the routes. Now, let’s also see how we can add the existing components to any of the pages.

On the right-hand side of the about story, we can see the empty body with a plus button that will allow us to add existing components to the page. If we click on it, we will see the following-

We have a list of existing components, and we can choose any of them. Let’s add the Teaser component, and fill in the Name field for that. As soon as we start filling the content in, we see the changes on the visual editor as well.

Once we hover on the right-hand side, we should see a similar plus button below the Teaser. Let’s add a Grid component along with three Features as columns, similar to what we have on the home story. We should see something like this now -

In a similar way, we can add any other components and they will be rendered automatically. We could add another Grid and it should look something like this -

We can even add more components anywhere we like in the about story, if we have those created. Now, we could also add the components of choice to the two other stories, Blog and Services, as well.

Wrapping Up

In this tutorial, we saw how to start creating a real website after we set up a project using Storyblok and Angular. Additionally, we learned how to create new stories and pages along with the dynamic rendering of the components wherever we place them.