Getting Started

8 Jun 20173 minutes to read

This section will explain the rendering procedure for the Angular GroupButton with the step-by-step instructions.

You can create the Angular project with the required script and themes files with the help of the below link:

https://help.syncfusion.com/angular-2/overview

Creating a GroupButton in Angular environment

Create the GroupButton using GroupButton tag inside the body tag as like below

HTML

<ej-groupbutton></ej-groupbutton>

Create the component TS file like below to render the component.

HTML

import { Component, ViewEncapsulation} from '@angular/core';



    @Component({

        selector: 'ej-app',

        templateUrl: 'app/app.component.html',

    })

    export class AppComponent {



        constructor() {}

    }

Model biding

DataSource for GroupButton can be set to component via model binding like below code example.
Here we have added the all required fields for GroupButton DataSource with data (inside the constructor of component)

JAVASCRIPT

export class AppComponent { 

    constructor() { 

    this.data = [
                { text: "Day", contentType: "textonly" },
            { text: "Week", contentType: "textonly" },
            { text: "Month", contentType: "textonly", selected: "selected" },
            { text: "Year", contentType: "textonly" }];
    }
    }

This dataSource need to be bounded with the GroupButton component like below

HTML

<ej-groupbutton [(dataSource)]="data"></ej-groupbutton>

Configuring the APIs of Angular GroupButton

All APIs of GroupButton can be configured and values can be updated from constructor. Please check with the below code example

HTML

<div class="content-container-fluid">
        <div class="row">

                GroupButton
                        <ej-groupbutton [(dataSource)]="data" [groupButtonMode] = "radioButton"></ej-groupbutton>

        </div>
        
    </div>

HTML

import { Component, ViewEncapsulation} from '@angular/core';

        @Component({

            selector: 'ej-app',

            templateUrl: 'app/app.component.html',

        })

        export class AppComponent {



            radioButton:string;

            constructor() {

                    this.radioButton ="radioButton";   
                    this.data = [
                { text: "Day", contentType: "textonly" },
            { text: "Week", contentType: "textonly" },
            { text: "Month", contentType: "textonly", selected: "selected" },
            { text: "Year", contentType: "textonly" }];
    
            }

        }