this works with typescript?
In my project I'm using angular with typescript. this plugin works with it?
SIGN IN To post a reply.
1 Reply
CI
Christopher Issac Sunder K
Syncfusion Team
May 21, 2019 12:47 PM UTC
Hi Luis,
Greetings from Syncfusion support.
Yes , you can render the ribbon component using TypeScript code from TS file in Angular. Please refer to the following code
|
<div class="cols-sample-area" style="width:100%">
<div>
<div id="defaultRibbon"></div>
<div id="contenteditor" class="e-contenteditor" contenteditable="true" spellcheck="false">
<p>Integer dui elit, cursus vel metus maximus, dictum semper magna. Donec volutpat porta gravida. Fusce dapibus cursus tellus et pulvinar. Fusce porta dolor eget consectetur ultricies.</p>
<p>Cras et quam scelerisque, blandit lorem a, tristique velit. Quisque sagittis sapien augue. Quisque tincidunt sit amet libero sed luctus.</p>
<p>Pellentesque rutrum mauris mi. Ut rutrum quam ac quam tincidunt elementum. Nullam pulvinar mattis velit, nec rutrum enim laoreet quis.Vestibulum ipsum leo, molestie convallis vehicula at, dictum non purus.</p>
</div>
</div>
<ul id="ribbonmenu">
<li>
<a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save As</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
</div> |
TS:
|
export class HomeComponent {
constructor() { }
ngOnInit() {
let fontfamily = ["Segoe UI", "Arial", "Times New Roman", "Tahoma", "Helvetica"], fontsize = ["1pt", "2pt", "3pt", "4pt", "5pt"], action1 = ["New", "Clear"], action2 = ["Bold", "Italic", "Underline", "strikethrough", "superscript", "subscript", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyFull", "Undo", "Redo"];
let sample = new ej.Ribbon($("#defaultRibbon"), {
width: "100%",
expandPinSettings: {
toolTip: "Collapse the Ribbon"
},
collapsePinSettings: {
toolTip: "Pin the Ribbon"
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "ribbonmenu", menuSettings: { openOnClick: false }
},
tabs: [{
id: "home", text: "HOME", groups: [{
text: "Alignment", alignType: ej.Ribbon.AlignType.Rows, content: [
{
groups: [
{
id: "textindent",
text: "Indent",
toolTip: "Text Indent",
buttonSettings: {
click: "onClick",
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-indent"
}
},
{
id: "textoudent",
text: "Outdent",
toolTip: "Text Outdent",
enableSeparator: true,
buttonSettings: {
click: "onClick",
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-outdent"
}
}],
defaults: {
type: "button",
isBig: false
}
},
.. . . . . . . . . . . . . .
});
}
} |
Sample can be downloaded from the following link,
Thanks,
Christo
SIGN IN To post a reply.
