Frontend State Management with Angular and NGRX : Building the pages of our application

Building the pages of our application

Now that we have all data fetching components ready, we will tie it all together in out component pages. We start off with our home page, in the template of our home page component we use the data loading component selector as follows. 

<div class="container">
  <div class="row">
    <main class="posts-listing col-lg-8">
      <div class="container">
        <app-news-items></app-news-items>
      </div>
    </main>
    <aside class="col-lg-4">
      <app-weather></app-weather>
      <app-currency currency="CEDIS"></app-currency>
    </aside>
  </div>
</div>

Lastly, we will set up our other pages, we will use our business page as an example and leave the rest as an exercise.  The component itself remains untouched, we only modify the template as follows

<div class="container">
  <div class="row">
    <main class="posts-listing col-lg-8">
      <div class="container">
        <app-news-items></app-news-items>
      </div>
    </main>
  </div>
</div>

With this simple template set up, our final application should look like the screenshot shown below:


course logo
Frontend State Management with Angular and NGRX
Number of sections:
12
Content length:
Delivery formats:
Frontend State Management with Angular and NGRX