import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Custom Dialog Style</h2> <eui-linkbutton (click)="d1.open()">Open Dialog</eui-linkbutton> <eui-dialog #d1 panelCls="mydlg" headerCls="mydlg-header" footerCls="mydlg-footer" [modal]="true" borderType="none"> <eui-panel-header>Please Confirm</eui-panel-header> <p style="text-align:center;margin:50px 0;font-size:16px">Are you sure you want to continue?</p> <eui-panel-footer> <eui-button-group style="width:100%;height:50px"> <eui-linkbutton class="f-full" [plain]="true" btnCls="mybtn">Ok</eui-linkbutton> <eui-linkbutton class="f-full" [plain]="true" btnCls="mybtn">Cancel</eui-linkbutton> </eui-button-group> </eui-panel-footer> </eui-dialog> `, encapsulation: ViewEncapsulation.None, styles: [` .mydlg{ width: 400px; border-radius: 0; background: #fff; box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); } .mydlg .mydlg-header{ line-height: 40px; background: #ef3e29; color: #fff; font-weight: bold; border: 0; } .mydlg .mydlg-footer{ border-color: #ddd; background: #fff; } .mybtn,.mybtn:hover{ border-radius: 0; } `] }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 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, BrowserAnimationsModule, 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);