How to make Size and Subtext configurable

[ommyan]

i tried to make configurable size and subtext options, like this

`

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

@Component({
  selector: 'app-knob',
  templateUrl: './knob.component.html',
  styleUrls: ['./knob.component.css']
})
export class KnobComponent{
    @Input () size;
    @Input () fontsize;
    @Input () subtext;
    @Input () persent;
         
      knOptions = {
            readOnly: true,
            unit: '%',
            textColor: '#000000',
            **size: this.size,**
            fontSize: '32',
            fontWeigth: '700',
            fontFamily: 'Roboto',
            valueformat: 'percent',
            value: 0,
            max: 100,
            trackWidth: 19,
            barWidth: 20,
            trackColor: '#D8D8D8',
            barColor: '#FF6F17',
            subText: {
                enabled: true,
                fontFamily: 'Verdana',
                font: '14',
                fontWeight: 'bold',
                **text:  this.subtext,**
                color: '#000000',
                offset: 7
            },
        }
    }
`

HTML template

`
<div ui-knob [value]="persent" size="size"  text="subtext" [options]="knOptions"></div>`

in usage

`<div class="row">
    <div class="col-md-8">
        <app-knob [persent]="'95'" size="110" text="Test " ></app-knob>
        <app-knob [persent]="'25'"  text="Test " ></app-knob>
        <app-knob [persent]="'55'" text="Over All" ></app-knob>
    </div>
</div>
`

not working, knob not rendering
does anyone know to do that?

[xzegga]

@ommyan you need to assign your new properties when instantiating the app-knob component and inside this component in the OnInit method, you can assign your input values to options property of knob directive.

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

@Component({
  selector: 'app-knob',
  templateUrl: './knob.component.html',
  styleUrls: ['./knob.component.css']
})
export class KnobComponent implements OnInit {
    @Input () size;
    @Input () fontsize;
    @Input () subtext;
    @Input () persent;
    knOptions: any = {}    
      
    
    ngOnInit() {
        this.knOptions = {
            readOnly: true,
            unit: '%',
            textColor: '#000000',
            size: this.size,
            fontSize: this.fontsize,
            fontWeigth: '700',
            fontFamily: 'Roboto',
            valueformat:  'percent',
            value: 0,
            max: 100,
            trackWidth: 19,
            barWidth: 20,
            trackColor: '#D8D8D8',
            barColor: '#FF6F17',
            subText: {
                enabled: true,
                fontFamily: 'Verdana',
                font: '14',
                fontWeight: 'bold',
                text:  this.subtext,
                color: '#000000',
                offset: 7
            },
        }
  }
}

Then you can instantiate the k-nob directly without your new inputs, these properties will be passed to the directive inside options values.

<div ui-knob [value]="persent" [options]="knOptions"></div>