import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>MenuItem Template</h2> <eui-menu [inline]="true" [noline]="true" menuWidth="200"> <eui-menu-item *ngFor="let item of items"> <ng-template euiItemTemplate> <div class="item">{{item.text}}</div> <div *ngIf="item.count" class="right"> <span class="count">{{item.count}}</span> </div> </ng-template> </eui-menu-item> </eui-menu> `, styles: [` .item{ line-height: 30px; padding: 0 20px; } .right{ position: absolute; right: 20px; height: 30px; top: 5px; } .count{ display: inline-block; border-radius: 6px; background: #666; color: #fff; padding: 0 6px; font-size: 12px; line-height: 16px; height: 16px; } `] }) export class AppComponent { items = [ {text:'Inbox',count:127}, {text:'Starred'}, {text:'Important'}, {text:'Sent Mail',count:32}, {text:'Drafts'}, {text:'Spam',count:345}, {text:'Trash'}, ]; }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);