How do I use Angular resolvers to preload data for Input?

[linda05]

Are there examples of using Smart.DateInput with state management (like Redux, VUEx, etc.)? How to sync global and local state?

[Markov]

Hi,

A resolver is a service that implements Resolve<T> and pre-fetches data before the route activates.
The resolved data is then available via ActivatedRoute in your component.

This is perfect for @Input() bindings, because you can ensure the input has data immediately when the component is rendered.

Create a Resolver

// date.resolver.ts
import { Injectable } from ‘@angular/core’;
import { Resolve } from ‘@angular/router’;
import { Observable, of } from ‘rxjs’;
import { DateService } from ‘./date.service’;

@Injectable({ providedIn: ‘root’ })
export class DateResolver implements Resolve<Date> {
constructor(private dateService: DateService) {}

resolve(): Observable<Date> {
// Simulate API call or fetch default date
return this.dateService.getDefaultDate();
}
}

Attach Resolver to Route

// app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { DateInputPageComponent } from ‘./date-input-page/date-input-page.component’;
import { DateResolver } from ‘./date.resolver’;

const routes: Routes = [
{
path: ‘date-input’,
component: DateInputPageComponent,
resolve: { defaultDate: DateResolver } // key = ‘defaultDate’
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

// date-input-page.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;

@Component({
selector: ‘app-date-input-page’,
template: `
<smart-date-input [value]=”preloadedDate”></smart-date-input>
`
})
export class DateInputPageComponent implements OnInit {
preloadedDate!: Date;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
this.preloadedDate = this.route.snapshot.data[‘defaultDate’];
}
}

In general:

[value] binds the preloaded date to the Smart.DateInput.
Resolver ensures the data is ready before component initialization, so the date input is populated immediately.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts