File
Implements
Metadata
| selector |
app-menu-aside |
| styleUrls |
menu-aside.component.css |
| templateUrl |
./menu-aside.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
display_menu_search
|
Default value: true
|
|
|
display_menu_user
|
Default value: true
|
|
|
Methods
|
Public ngOnChanges
|
ngOnChanges(changes: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| changes |
any
|
|
|
|
|
Public ngOnInit
|
ngOnInit()
|
|
|
|
|
|
Public currentUser
|
currentUser: User
|
Type : User
|
|
|
import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { User } from '../../models/user';
import { Router } from '@angular/router';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-menu-aside',
styleUrls: ['./menu-aside.component.css'],
templateUrl: './menu-aside.component.html'
})
export class MenuAsideComponent implements OnInit, OnChanges {
public currentUrl: string;
public currentUser: User = new User();
@Input() links: Array<any> = [];
@Input() display_menu_user = true;
@Input() display_menu_search = true;
@Input() menu_title = '';
constructor(private userServ: UserService, public router: Router) {
this.router.events.subscribe((evt: any) => this.currentUrl = evt.url);
this.userServ.getCurrent().subscribe((user) => this.currentUser = user);
}
public ngOnInit() { }
public ngOnChanges(changes: any) {
if ( this.menu_title !== '') {
console.log('menu_title is deprecated please use "header" in your menuService links configuration');
}
}
}
<aside class="main-sidebar">
<section class="sidebar" >
<div *ngIf="display_menu_user" class="user-panel">
<div class="pull-left image" *ngIf="currentUser?.avatarUrl" >
<img [src]="currentUser?.avatarUrl" class="img-circle"
[alt]="currentUser?.getName()">
</div>
<div class="pull-left info">
<p>{{currentUser?.getName()}}</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<form *ngIf="display_menu_search" action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control"
placeholder="Search..."> <span class="input-group-btn">
<button type="submit" name="search" id="search-btn"
class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<ul class="sidebar-menu" data-widget="tree">
<ng-container *ngIf="menu_title !== '' ">
<li class="header">{{menu_title}}</li>
</ng-container>
<ng-container *ngFor="let item of links">
<ng-container *ngIf="item.header">
<li class="header">{{item.header}}</li>
</ng-container>
<ng-container *ngIf="item.class">
<li>
<app-component-loader [class_component]="item.class" [data]="item.data"></app-component-loader>
</li>
</ng-container>
<ng-container *ngIf="item.link">
<li [class.active]="item.link[0] === currentUrl">
<a *ngIf="!item.external" [routerLink]="item.link">
<i class="fa fa-{{item.icon}}"></i>
<span>{{item.title}}</span>
</a>
<a *ngIf="item.external" [href]="item.link" [target]="item.target">
<i class="fa fa-{{item.icon}}"></i>
<span>{{item.title}}</span>
</a>
</li>
</ng-container>
<ng-container *ngIf="item.sublinks">
<li class="treeview">
<a href="#">
<i *ngIf="item.icon" class="fa fa-{{item.icon}}"></i>
<span>{{item.title}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<ng-container *ngFor="let subitem of item.sublinks">
<li [class.active]="subitem.link[0] === currentUrl">
<a *ngIf="!subitem.external" [routerLink]="subitem.link">
<i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
<span>{{subitem.title}}</span>
</a>
<a *ngIf="subitem.external" [href]="subitem.link" [target]="subitem.target">
<i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
<span>{{subitem.title}}</span>
</a>
</li>
</ng-container>
</ul>
</li>
</ng-container>
</ng-container>
</ul>
</section>
</aside>
Legend
Html element with directive