My goal is to preload the data for locations before the component is rendered.
dashboard.html
{{ places[0]._id }} //testing purposes
dashboard.ts
import { Component, OnInit } from '@angular/core';
import { PlacesService } from 'src/app/services/places/places.service';
import { IPlace } from 'src/app/types/places';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent {
places: IPlace[] = [];
constructor(
private placesService: PlacesService,
private route: ActivatedRoute,
) {
}
ngOnInit(): void {
this.route.data.subscribe((data) => {
this.places = data['places'];
});
}
}
places.resolver.ts
import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
ResolveFn,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';
import { PlacesService } from '../services/places/places.service';
import { IPlace } from '../types/places';
@Injectable({
providedIn: 'root',
})
export class PlacesResolver {
constructor(private placesService: PlacesService) {}
resolve: ResolveFn<IPlace[]> = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<IPlace[]> => {
return this.placesService.getPlaces();
};
}
places.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable, pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class PlacesService {
constructor(private http: HttpClient) {}
getPlaces(): Observable<any> {
var requestUrl = `/api/places`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
});
return this.http.get(requestUrl, {
headers: headers,
});
}
}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { ActivatedRouteSnapshot, RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { PlacesResolver } from './resolvers/places.resolver';
import { AuthGuard } from './_helpers/authGuard/auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard],
resolve: {
places: PlacesResolver,
},
data: { role: [] },
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
I have a button to navigate to /dashboard: navbar.html
<button
label="Dashboard"
(click)="dashboardClick()"
*ngIf="
(null | isLoggedIn | async) && (['admin', 'worker'] | hasRole | async)
"
>
Dashboard
</button>
navbar.ts
In this scenario, there are two different types of dashboards where the URL will be ''
dashboardClick() {
this.url = this.lastVisitedService.getLastVisited()?.split('/')[2] || '';
this.router.navigate(['/dashboard', this.url]);
}
When clicking the dashboard button, the _id is not displayed initially, but console.log(result) returns the data. Upon page refresh, the data is successfully logged and displayed on the page. What could be causing this issue? Is there an alternative approach? Feel free to request the interceptor setup if needed.