typescript 사용해보기2

html은 실질적으로 화면에 보여주는 부분이다.

<cmm-page-header [pageHeader]="pageHeader"></cmm-page-header>

<!-- Main content -->

<section class="content">

    <!-- Search Form Start -->

    <div class="box box-info">

        <form class="form-horizontal" [formGroup]="searchForm">

            <div class="box-body no-padding form-2">

                <div class="row no-margin">

                    <div class="form-group form-group-sm">

                        <div class="col-sm-2 control-label2 label2_tit">

                            <cmm-label [for]="'searchForm_makeDt'" [label]="'작업일'"></cmm-label><!-- 작업일 -->

                        </div>

                        <div class="col-sm-10 input-group">

                            <cmm-daterange [name]="'searchForm_makeDt'" [daterange]="searchRange"

                                (changed)="event_changedRange($event)"></cmm-daterange>

                        </div>

                    </div>

                </div>

            <div class="row no-margin">

                <div class="col-sm-2 control-label2 label2_tit">

                    <cmm-label [for]="'searchForm_selectDt'" [label]="'조회단위'"></cmm-label><!-- 조건단위 -->

                </div>

                <div class="col-sm-4 input-group">

                    <cmm-radiobox [name]="'searchForm_selectDt'" formControlName="selectDt" [(ngModel)]="searchVo.selectDt" [codeId]="'COM_0111'"></cmm-radiobox>

                </div>

            </div>

            </div>

        </form>

        <div class="box-footer btn-groups">

            <cmm-button [type]="'INT'" [label]="'B_INT'" (click)="click_Reset()"></cmm-button>

            <div class="pull-right">

                <cmm-button [type]="'INQT'" [label]="'B_INQT'" (click)="click_Search()"></cmm-button>

            </div>

        </div>

    </div>

    <!-- Search Form End -->

    <div class="box">

        <div class="box-header btn-groups">

            <cmm-button [type]="'XLS'" [size]="'SM'" [label]="'B_XLS_DWNL'"

            (click)="exportExcel(flexGrid, '임대 농기계 통계')"></cmm-button>

            <cmm-button [type]="'PDF'" [size]="'SM'" [label]="'B_PDF_DWNL'"

            (click)="exportPdf(flexGrid, '임대 농기계 통계')"></cmm-button>

            <div class="pull-right">

                <!-- <cmm-button [type]="'NEW'" [label]="'B_NEW'" (click)="click_New()"></cmm-button> -->

            </div>

        </div>

        <!-- GridList Start -->

        <!-- <div class="box-body no-padding" *ngIf="isIn"> -->

            <cmm-wj-flex-grid *ngIf="isIn"

                #flexGrid [itemsSource]="gridList"

                [isReadOnly]="true"

                [allowSorting]="true"

                [allowDragging]="true"

                [headersVisibility]="'All'"

                [refreshOnEdit] = "false"

                [displayRowCnts] = "15"

                (click) = "onSaveStateClick()"

                (dragend)="onSaveStateClick()"

                (initialized)="event_initGrid(flexGrid)">

            </cmm-wj-flex-grid>

            <div style="display:none">

                <wj-list-box #columnPicker class="column-picker"

                    (click)="onSaveStateClick()"

                    (dragstart)="handleDragStart($event)"

                    (dragover)="handleDragOver($event)"

                    (drop)="handleDrop($event)"

                    (dragend)="handleDragEnd($event)">

                </wj-list-box>

            </div>

            <cmm-paging2 *ngIf="isIn" #paging></cmm-paging2>

            <cmm-excel-export #group_excelExport></cmm-excel-export>

        <cmm-button [type]="'NEW'" [label]="'B_SAVE_RESET'" (click)="onResetStateClick()"></cmm-button>

        <!-- </div> -->

        <!-- GridList End -->

        <!-- <cmm-button [type]="'NEW'" [label]="'B_SAVE_GRID'" (click)="onSaveStateClick()"></cmm-button> -->

    </div>

    <div id="grid" style="visibility:hidden"></div>

    <div style="width: 20%; align-self: end; padding-right: 1rem; padding-top: 0.5rem;">

        <form class="form-horizontal" [formGroup]="searchForm">

            <cmm-selectbox

                [name]="'searchForm_dateType'"

                formControlName="dateType"

                [codeId]="'COM_0113'"

                (changed) = "changed_getData($event)"

                [(ngModel)]="searchVo3.dateType">

            </cmm-selectbox>

        </form>

    </div>

    <wj-flex-chart

    [chartType]="'Column'"

    [itemsSource]="dataList"

    [bindingX]="'date'"

    [tooltipContent]="tooltipContent"

    style="width: -webkit-fill-available; padding-right: 1rem !important; padding-left: 1rem !important;">

    <wj-flex-chart-legend [position]="'Bottom'"></wj-flex-chart-legend>

    <wj-flex-chart-axis [wjProperty]="'axisX'"></wj-flex-chart-axis>

    <wj-flex-chart-series [name]="'보유갯수'" [binding]="'total_count'">

        <wj-flex-chart-axis

            #axisY

            wjProperty="axisY"

            position="Right"

            title="농기계 보유량"

            [min] = "0"

            [axisLine]="true">

        </wj-flex-chart-axis>

    </wj-flex-chart-series>

        <!-- <wj-flex-chart-axis  -->

            <!-- #axisY  -->

            <!-- wjProperty="axisY"  -->

            <!-- title="농기계 보유량"  -->

            <!-- [min] = "0" -->

            <!-- [axisLine]="true"> -->

        <!-- </wj-flex-chart-axis> -->

        <!-- <wj-flex-chart-series [name]="'보유갯수'" [binding]="'total_count'" [chartType]="'LineSymbols'"></wj-flex-chart-series> -->

</wj-flex-chart>

</section>

<!-- /.content -->

 

여기서의 변수값은 .ts 부분에서 정의를 해준다.