Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
In this sample , the title for settings icon can be achievable by using ‘beforeItemRender’ client-side event in Menu component.
import { Component } from '@angular/core';
import { enableRipple, closest } from '@syncfusion/ej2-base';
import { MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
selector: 'app-root',
template: `<div class="menu-section">
<div class="menu-control">
<ejs-menu [items]='menuItems' (beforeItemRender)='onBeforeItemRender($event)'>></ejs-menu>
</div>
</div> `
})
export class AppComponent {
private menuItems: MenuItemModel[] = [
{
id: 'settingIcon',
iconCss: 'em-icons e-file',
items: [
{ text: 'Open',
items: [
{ text: 'Sub Option1' },
{ text: 'Sub Option2' },
]
},
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
]
}
];
public onBeforeItemRender(args: MenuEventArgs): void {
if (args.item.id == 'settingIcon') {
args.element.setAttribute('title', 'Settings');
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
}
body {
margin-top: 100px;
text-align: center;
}
.e-file::before {
content: '\e886';
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret {
display: none;
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon {
padding-right: 5px;
}