# Adaptive Settings

The increasing variety of mobile devices requires an adaptive rendering for your application that covers all different screen resolutions and ensures a smooth user experience. You can customize the adaptive rendering of the Kendo UI for Angular components by modifying the default adaptive breakpoints or updating them at runtime.

The following example demonstrates how to customize the adaptive settings of the Kendo UI for Angular DatePicker.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/adaptive-settings/source.txt)

## Adaptive Settings Configuration

You can modify the default adaptive breakpoints used across the Kendo UI for Angular components globally by setting the following [`AdaptiveSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettings) properties:

* [`small`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettings#small)—Sets the horizontal screen width in pixels up to which the component will display as a full-screen modal. The default value is `500`.
* [`medium`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettings#medium)—Sets the horizontal screen width in pixels up to which the component will display as a docked-to-the-bottom modal. The default value is `768` and the `small` adaptive breakpoint is used as a lower boundary.

To configure the new adaptive settings globally, include the [`AdaptiveService`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptiveservice) in the [`providers`](https://angular.dev/guide/di/dependency-injection-providers#specifying-a-provider-token) array of the root component and use the [`ADAPTIVE_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptive_settings) token to provide the `AdaptiveSettings` object as a value.

```ts
@Component({
    ...
    providers: [
        AdaptiveService, 
        { provide: ADAPTIVE_SETTINGS , useValue: { small: 600, medium: 850 } }
    ],
})
```

## Changing the Adaptive Settings Dynamically

The following example demonstrates how to dynamically update the adaptive settings of the Kendo UI for Angular DatePicker.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/adaptive-settings/dynamic-change/source.txt)

If you need to dynamically modify any of the adaptive breakpoints in your application at runtime, use the following approach:

1. Include the [`AdaptiveSettingsService`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettingsservice) in the `providers` array of the root component.

   ```ts
   @Component({
       ...
       providers: [
           AdaptiveService, 
           AdaptiveSettingsService, 
           { provide: ADAPTIVE_SETTINGS , useValue: { small: 600, medium: 850 } }
       ],
   })
   ```

2. Inject the `AdaptiveSettingsService` in the constructor of the component.

   ```ts
   constructor(private adaptiveService: AdaptiveSettingsService) { }
   ```

3. Call the [`notify`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettingsservice#notify) method exposed by the service and pass the new `AdaptiveSettings` object as an argument.

   ```ts
   export class AppComponent {
       public adaptiveBreakpoints: AdaptiveSettings = { small: 600, medium: 850 };

       public changeAdaptiveBreakpoints(): void {
           this.adaptiveBreakpoints = { small: 750, medium: 1150 };
           this.adaptiveService.notify(this.adaptiveBreakpoints);
       }
   }
   ```

## Suggested Links

* [API Reference of the ADAPTIVE_SETTINGS token](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptive_settings)
* [API Reference of the AdaptiveService](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptiveservice)
* [API Reference of the AdaptiveSettingsService](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/adaptivesettingsservice)