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