I tried to implement Ngrx into my Angular Application, but sadly haven't been able to retrieve any data. Any help is appreciated!
What I'm trying to do in the property.component.ts is to get all the data when the component gets instantiated and just display the data in the property.component.html.
property.component.ts
import {Component, OnInit} from '@angular/core';
import {select, Store} from '@ngrx/store';
import {Router} from '@angular/router';
@Component({
selector: 'app-property',
templateUrl: './property.component.html',
styleUrls: ['./property.component.css']
})
export class PropertyComponent implements OnInit {
properties$ = this._store.pipe(select('properties'));
constructor(private _store: Store, private _router: Router) {}
ngOnInit() {
this._store.dispatch({
type: '[Property] Get Properties'
});
console.log(this.properties$);
}
navigateToProperty(id: number) {
this._router.navigate(['property', id]);
}
}
property.component.html
test
{{properties$ | async}}
property.service.ts
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs';
import {PropertyModel} from '../models/property.model';
@Injectable({
providedIn: 'root'
})
export class PropertyService {
propertiesUrl = 'someapi';
private httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
constructor(private http: HttpClient) { }
getProperties(): Observable {
return this.http.get(this.propertiesUrl, this.httpOptions);
}
}
property.actions.ts
import { Action } from '@ngrx/store';
import {PropertyModel} from '../../models/property.model';
export const GET_PROPERTIES = '[Property] Get Properties';
export const GET_PROPERTIES_SUCCESS = '[Property] Get Properties Success';
export const SEARCH_PROPERTY = '[Property] Get Property';
export const SEARCH_PROPERTY_SUCCESS = '[Property] Get Property Success';
export class GetProperties implements Action {
public readonly type = GET_PROPERTIES;
constructor(public retrievedProperties: PropertyModel[]) {}
}
export class GetPropertiesSuccess implements Action {
public readonly type = GET_PROPERTIES_SUCCESS;
constructor(public retrievedProperties: PropertyModel[]) {}
}
export class GetProperty implements Action {
public readonly type = SEARCH_PROPERTY;
constructor(public searchId: string) {}
}
export type PropertyActions = GetProperties | GetPropertiesSuccess | GetProperty;
property.effects.ts
import {Injectable} from '@angular/core';
import {Actions, Effect, ofType} from '@ngrx/effects';
import {GET_PROPERTIES, PropertyActions} from '../actions/property.actions';
import {PropertyService} from '../../services/property.service';
import {mapTo} from 'rxjs/operators';
@Injectable()
export class PropertyEffects {
@Effect()
getProperties$ = this.actions$.pipe(
ofType(GET_PROPERTIES),
mapTo(this.propertyService.getProperties())
);
constructor(private actions$: Actions, private propertyService: PropertyService) {}
}
and finally my property.reducers.ts
import {GET_PROPERTIES, GET_PROPERTIES_SUCCESS, PropertyActions} from '../actions/property.actions';
import {PropertyModel} from '../../models/property.model';
export function propertyReducer(properties: PropertyModel[] = [], action: PropertyActions): PropertyModel[] {
switch (action.type) {
case GET_PROPERTIES: {
return [...action.retrievedProperties];
}
default: {
return properties;
}
}
}
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {CustomerComponent} from './customer/customer.component';
import {HttpClientModule} from '@angular/common/http';
import {CustomMaterialModule} from './custom.material.module';
import {RouterModule, Routes} from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {StoreModule} from '@ngrx/store';
import {PropertyComponent} from './property/property.component';
import {propertyReducer} from './store/reducers/property.reducers';
const appRoutes: Routes = [
{
path: 'customers',
component: CustomerComponent,
data: {title: 'Customer List'}
},
{
path: 'property',
component: PropertyComponent,
data: {title: 'Property List'}
},
{
path: '', // General redirect
component: CustomerComponent,
pathMatch: 'full'
}
];
@NgModule({
declarations: [
AppComponent,
CustomerComponent,
PropertyComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
HttpClientModule,
BrowserAnimationsModule,
CustomMaterialModule,
StoreModule.forRoot(propertyReducer)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
