D-Net

import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';

@Component({

  selector: 'border',

  template: `

    <div class="uk-grid uk-child-width-1-2">

      <div class="uk-margin-remove">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>

        <!--      <div class="uk-margin-bottom uk-form-hint ">hint</div>-->

        <div class="input-box">

          <input class="uk-input" [(ngModel)]="radius" (input)="borderChanged()" type="number" min="0"/>

        </div>

      </div>

      <div class="uk-margin-remove">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>

        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->

        <div class="input-box">

          <input class="uk-input" [(ngModel)]="width" (input)="borderChanged()" type="number" min="0"/>

        </div>

      </div>

      <div class="uk-margin-small-top">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>

        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->

        <div class="input-box ">

          <mat-form-field class="uk-width-1-1">

            <mat-select class="" [(ngModel)]="style" name="{{'select_type_'}}"

                        (ngModelChange)="borderChanged()"

                        [disableOptionCentering]="true"

                        panelClass="">

              <mat-option [value]="'solid'">solid</mat-option>

              <mat-option [value]="'dotted'">dotted</mat-option>

              <mat-option [value]="'dashed'">dashed</mat-option>

            </mat-select>

          </mat-form-field>

        </div>

      </div>

    </div>

  `

})

export class BorderComponent implements OnInit {

  @Input() radius: number = 0;

  @Input() width: number = 0;

  @Input() style = 'solid';

  // @Input() addMargin: boolean = false;

  @Output() borderChange = new EventEmitter();

  constructor() {

  }

  ngOnInit() {

  }

  borderChanged() {

    console.log(this.radius);

    this.borderChange.emit({radius: this.radius, width: this.width, style: this.style});

  }

}