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. Image for the cookie policy date

this works with typescript?

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


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 


Loader.
Live Chat Icon For mobile
Up arrow icon