--- layout: post title: MVVM description: mvvm platform: typescript control: Circular Gauge documentation: ug --- # MVVM ## AngularJS Circular Gauge contains AngularJS support. You can add object as well as array object in the Circular Gauge. The two way binding support is given to the pointer value, minimum scale value and maximum scale value. ## Rendering the Circular Gauge **ej-CircularGauge** is the control tag in which **ej** is tag prefix and **CircularGauge** is the control name.The following code example helps you to render **Circular Gauge**. {% highlight html %} {% endhighlight %} Execute the above code to render the output as follows. ![](MVVM_images/MVVM_img1.png) ## Adding Scale Collection **Scale** is an array object and you can use the inner tag for it. Object in the array collection (i.e. border) is extended with hyphen in the same tag. **Example**: e-border-width and e-border-color. {% highlight html %} {% endhighlight %} Execute the above code to render the following output. ![](MVVM_images/MVVM_img2.png) ## Adding Pointer Collection **Pointer** is an array object and you can use the inner tag for it. Object in the array collection (i.e. pointer cap) is extended with hyphen in the same tag. **Example**: e-pointerCap-radius. {% highlight html %} {% endhighlight %} Execute the above code to render the output as follows. ![](MVVM_images/MVVM_img3.png) ## Adding Label Collection **Label** is also an array object. You can use the inner tag for it. {% highlight html %} {% endhighlight %} Execute the above code to render the following output. ![](MVVM_images/MVVM_img4.png) ## Adding Tick Collection **Tick** is an array object. You can use the inner tag for it. {% highlight html %} {% endhighlight %} Execute the above code to render the following output. ![](MVVM_images/MVVM_img5.png) ## Adding Range Collection **Range** is an array object. You can use the inner tag for it. Object in the array collection (i.e. border) is extended with hyphen in the same tag. **Example**: e-border-color. {% highlight html %} {% endhighlight %} Execute the above code to render the following output. ![](MVVM_images/MVVM_img6.png) ## Two Way Binding **Circular Gauge** support the two way binding for the property **value, minimum and maximum** as mentioned earlier. The following code example explains how to achieve the two way binding in **Circular Gauge**. {% highlight html %}
e-maximum="maximum" e-minimum="minimum" e-majorIntervalValue="20" e-minorIntervalValue="10" e-border-width="0.5"> e-value="number" e-pointerCap-radius="12">
{% endhighlight %} Execute the above code to render the following output. ![](MVVM_images/MVVM_img7.png)