import { createFeatureSelector, createSelector, Action } from "@ngrx/store";
import { Tutorial } from '../models/tutorial.model';
import * as TutorialActions from '../actions/tutorial.actions';
import { EntityState, EntityAdapter, createEntityAdapter } from "@ngrx/entity";
import * as fromRoot from "../app.state";
const initialState: Tutorial = {
id: '151-115-015',
name: 'Sadikur Rahman',
email: 'rahmansadik29@yahoo.com',
phone: '01718361554',
age: 24,
address: 'Sylhet, Bangladesh',
}
export interface TutorialState extends EntityState<Tutorial> {
selectedCustomerId: number | null;
}
export interface AppState extends fromRoot.AppState {
tutorials: Tutorial;
}
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {
switch (action.type) {
case TutorialActions.ADD_TUTORIAL:
return [...state, action.payload];
case TutorialActions.REMOVE_TUTORIAL:
state.splice(action.payload, 1)
return state;
case TutorialActions.EDIT_TUTORIAL:
return (action.payload, {
...state,
selectedCustomerId: action.payload
});
default:
return state;
}
}
const getCustomerFeatureState = createFeatureSelector<TutorialState>('tutorials');
export const getCurrentCustomerId = createSelector(
getCustomerFeatureState,
(state: TutorialState) => state.selectedCustomerId
);
export const getCurrentCustomer = createSelector(
getCustomerFeatureState,
getCurrentCustomerId,
state => state.selectedCustomerId
);
read.component.html
<div class="right" *ngIf="tutorials">
<div class="card mb-2" style="width: 18rem;" *ngFor="let tutorial of tutorials | async">
<h5 class="card-header">Student Information</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">{{ tutorial.id }}</li>
<li class="list-group-item">{{ tutorial.name }}</li>
<li class="list-group-item">{{ tutorial.email }}</li>
<li class="list-group-item">{{ tutorial.phone }}</li>
<li class="list-group-item">{{ tutorial.age }}</li>
<li class="list-group-item">{{ tutorial.address }}</li>
</ul>
<button class="btn btn-danger" (click)="delTutorial(i)">Delete</button>
<button class="btn btn-info" (click)="editTutorial(tutorial)">Edit</button>
</div>
</div>
read.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model';
import { AppState } from './../app.state';
import * as TutorialActions from './../actions/tutorial.actions';
@Component({
selector: 'app-read',
templateUrl: './read.component.html',
styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {
tutorials: Observable<Tutorial[]>;
constructor(private store: Store<AppState>) {
this.tutorials = store.select('tutorial');
console.log(this.tutorials);
}
delTutorial(index){
this.store.dispatch(new TutorialActions.RemoveTutorial(index) );
}
editTutorial(tutorial:any){
const id = tutorial.id;
this.store.dispatch(new TutorialActions.EditTutorial(id))
}
edit.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { FormBuilder, FormGroup } from "@angular/forms";
import { Tutorial } from './../models/tutorial.model';
import { AppState } from './../app.state';
import * as TutorialActions from './../actions/tutorial.actions';
import { getCurrentCustomerId } from '../reducers/tutorial.reducer';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
//tutorialForm: FormGroup;
tutorials:any;
constructor(private fb: FormBuilder, private store: Store<AppState>) {}
ngOnInit() {
const customer$: Observable<any> = this.store.select(
getCurrentCustomerId
);
console.log(customer$);