this works with typescript?

[Luis Carlos]

In my project I'm using angular with typescript. this plugin works with it? 

[Christopher Issac Sunder K]

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, 

http://www.syncfusion.com/downloads/support/forum/144733/ze/Ribbon-215991395  

Thanks, 

Christo