We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

this works with typescript?

Thread ID:

Created:

Updated:

Platform:

Replies:

144733 May 20,2019 12:12 PM UTC May 21,2019 12:47 PM UTC Angular 1
loading
Tags: ejRibbon
Luis Carlos
Asked On May 20, 2019 12:12 PM UTC

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


Christopher Issac Sunder K [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon