CODEWITHSUNDEEP
angularangular2-routing
Dmitrij Kostyushko
Dmitrij Kostyushko

Reputation: 656

Is there a way to Create an intermidiate route in angular 2

My goal is to have a single page style home page with single router-outlet and traditional layout (header, body, footer) in every other navigation route with one router-outlet in every other route. The reason i can not just have an empty components for header and footer within my home page is beacause i want to use fullpage.js for my home page and it has a very strict layout demands. I want to have a route that would serve as intermediate beatween the home page and other parts of application. And evade using the ugly urls like /app(page:products)

site layout

Upvotes: 2

Views: 203

Answers (1)

Fabien Greard
Fabien Greard

Reputation: 1894

How about you create a factory, and use angular transclusion using ng-content.

your factory example :

  <div class="factory-container">
    <factory-header>
      <ng-content select="header"></ng-content>
    </factory-header>
    <div class="factory-section">
      <router-outlet></router-outlet>
    </div>
    <factory-footer>
      <ng-content select="footer"></ng-content>
    </factory-footer>
  </div>

and then inside one of your component :

<factory>
  <header>
   YOUR CONTENT LOGIC
  </header>
  <footer>
   YOUR CONTENT LOGIC
  </footer>
</factory>

maybe this link could help : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Upvotes: 1

Related Questions