Adjust font sizes with a range component

Ionic Framework ionic-v3
4

You first need to import the NgClass directive like this:

import {NgClass} from '@angular/common';

Then, declare the use of the directive in your component definition:

@Component({
    ..., 
    directives: [NgClass],
})

In your template, you can use NgClass this way:

[ngClass]="{your-classname: bindedPropertyName, other-classname: ...}"

Where ‘your-classname’ is the name of the class you want to define, and ‘bindedPropertyName’ is the name of the property you defined in your component. What I just did here is just describing what is shown the the example given here (the documentation of NgClass I gave you above). Just bind your ion-range model on this property, and define the conditions when the class must appear in your template in the NgClass directive.

You can put conditions in NgClass, so basically you could end with something like this:

[ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3, ...}"

Where fontSize could be the name of the property you binded your ion-range on, and supposing that you can only have 3 different values. Adapt according to your needs. Hope it can help you to see more clear.

1 Like