Routes:
export const POST_EDIT_ROUTE: Routes = [
{
path: 'edit',
component: PostEditComponent,
data: {
dataMode: 'EDIT'
}
},
{
path: 'delete',
component: PostEditComponent,
data: {
dataMode: 'DELETE'
}
}
];
PostEditComponent sample:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { PostInterface } from '@core/interfaces/post.interface';
import { PostService } from '@core/services/post.service';
@Component({
selector: 'app-post-edit',
templateUrl: './post-edit.component.html',
styleUrls: ['./post-edit.component.scss']
})
export class PostEditComponent implements OnInit {
postForm: FormGroup;
postData: PostInterface;
postId: number;
constructor(private activatedRoute: ActivatedRoute,
public postService: PostService) {
this.postId = +this.activatedRoute.snapshot.paramMap.get('id');
// Get data param from the route config
console.log(this.activatedRoute.snapshot.data?.dataMode);
// will console.log if URL will look like: site.com/post/2/edit?action=create
if (this.activatedRoute.snapshot.queryParamMap.get('action') === 'create') {
console.log('Created successfully');
}
}
ngOnInit(): void {
this.postForm = new FormGroup({
title: new FormControl('', [Validators.required]),
content: new FormControl('', [Validators.required])
});
// populate post form data
this.postService.getById(this.postId).subscribe((postResponse: PostInterface) => {
this.postData = postResponse;
const postValues = {
title: this.postData?.title,
content: this.postData?.content
};
this.postForm.patchValue(postValues);
});
}
submit() {
const postFormData = {
title: this.postForm.value.title,
content: this.postForm.value.content
};
this.postService.update(this.postData.id, postFormData).subscribe(postResponse => {
console.log('Updated successfully');
});
}
}