AngularDart: How to change partial parts of layout based on navigation?

Issue

Say I have this simple scaffold in my app_component.html:

<header>
    <div>
        <!-- here I have some elements that won't change -->
    </div>
    <div>
        <!-- SECTION HEADER: but I want to change this part's content, based on
             navigation or something else (auth roles, for example) -->
    </div>
</header>

<main>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <section class="section">
                    <router-outlet>
                        <!-- SECTION MAIN: main content goes here -->
                    </router-outlet>
                </section>
            </div>
        </div>
    </div>
</main>
<div class="divider"></div>
<footer>
    <div>
        some footer here. nothing important
    </div>
</footer>

As you can see in the snippet, I’m using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it’s content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.

Solution

The short answer is no, the router doesn’t currently have support for doing this easily.

Other frameworks support this functionality through “named” router outlets. This allows multiple outlets to exist in the same view, provided they’re given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular

Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.

Answered By – Leon Senft

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.