0

i try to use multi level push menu in angular 4 component but when use it in *ngFor
like this

@{
    ViewData["Title"] = "Home Page";
}

<link rel="stylesheet" type="text/css" href="~/dist/Menu/demo.css" />
<link rel="stylesheet" type="text/css" href="~/dist/Menu/icons.css" />
<link rel="stylesheet" type="text/css" href="~/dist/Menu/component.css" />

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
        <script src="~/dist/Menu/classie.js" asp-append-version="true"></script>
                <script src="~/dist/Menu/mlpushmenu.js" asp-append-version="true"></script>
                <script src="~/dist/Menu/modernizr.custom.js" asp-append-version="true"></script>


    <script>
            new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    </script>
}



     constructor(private remoteService: RemoteService,@Inject('BASE_URL') baseUrl: string) {




          this.remoteService.filter(baseUrl).then(result => {
            this.item = result.items;

        });}


    <nav id="mp-menu" class="mp-menu">
        <div class="mp-level">
            <h2 class="icon icon-world">All Categories</h2>
            <ul>

                <li *ngFor="let user of item" class="icon icon-arrow-left">
                    <a class="icon icon-display" href="#">Devices</a>
                    <div class="mp-level">
                        <h2 class="icon icon-display">Devices</h2>
                        <a class="mp-back" href="#">back</a>
                        <ul>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-phone" href="#">Mobile Phones</a>
                                <div class="mp-level">
                                    <h2>Mobile Phones</h2>
                                    <a class="mp-back" href="#">back</a>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </div>
                            </li>

                        </ul>
                    </div>
                </li>



</ul>
    </div>
</nav>

the link not going to next level :(

and

<a class="icon icon-display" href="#">Devices</a>

work as normal link and going to to # link

and i try the map and subscribe in angular http but its the same erorr

but when i use static array instead of the remote service like this

    <nav id="mp-menu" class="mp-menu">
        <div class="mp-level">
            <h2 class="icon icon-world">All Categories</h2>
            <ul>

                <li *ngFor="let user of [1,2,3]" class="icon icon-arrow-left">
                    <a class="icon icon-display" href="#">Devices</a>
                    <div class="mp-level">
                        <h2 class="icon icon-display">Devices</h2>
                        <a class="mp-back" href="#">back</a>
                        <ul>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-phone" href="#">Mobile Phones</a>
                                <div class="mp-level">
                                    <h2>Mobile Phones</h2>
                                    <a class="mp-back" href="#">back</a>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </div>
                            </li>

                        </ul>
                    </div>
                </li>



</ul>
    </div>
</nav>

it work and going to next level and the like this

any body can help me to use the multi level menu in the angular

2 Answers 2

0

It's because html is getting rendered before response is received from server and item is assigned any data.

Try using : <li *ngIf="item" *ngFor="let user of item" class="icon icon-arrow-left">

2
  • Can't have multiple template bindings on one element Dec 28, 2017 at 5:39
  • and i try to but them in <ng-container *ngIf="item" > and its the same Dec 28, 2017 at 5:47
0

You can try "ngx-multi-level-push-menu".

Just follow the description here: https://www.npmjs.com/package/@ramiz4/ngx-multi-level-push-menu

1
  • the component you linked to doesn’t seem to actually support multiple levels. There is an issue already reported, but any insight you had on how to get that to work would be great May 28, 2018 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.