GPT

Component Implementation

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { PostsService } from '../../services/posts.service'; import { Post } from '@prisma/client';

Prompt text

Original English text. Replace placeholders with your own details.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PostsService } from '../../services/posts.service';
import { Post } from '@prisma/client';

@Component({
 selector: 'app-posts',
 template: `
 <div>
 <h2>Posts</h2>
 
 <div *ngIf="error" class="error">
 {{ error }}
 </div>

 <form [formGroup]="postForm" (ngSubmit)="createPost()">
 <input formControlName="title" placeholder="Title" required>
 <input formControlName="content" placeholder="Content">
 <input formControlName="authorId" type="number" placeholder="Author ID" required>
 <button type="submit" [disabled]="!postForm.valid">Add Post</button>
 </form>

 <ul>
 <li *ngFor="let post of posts">
 <h3>{{ post.title }}</h3>
 <p>{{ post.content }}</p>
 <p>By: {{ post.author?.name }}</p>
 <button (click)="togglePublish(post)">
 {{ post.published ? 'Unpublish' : 'Publish' }}
 </button>
 <button (click)="deletePost(post.id)">Delete</button>
 </li>
 </ul>
 </div>
 `,
 styles: [`
 .error {
 color: red;
 margin-bottom: 1rem;
 }

 form {
 margin-bottom: 1rem;
 }

 input {
 margin-right: 0.5rem;
 }

 ul {
 list-style: none;
 padding: 0;
 }

 li {
 margin-bottom: 1rem;
 padding: 1rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 }

 h3 {
 margin: 0 0 0.5rem 0;
 }

 p {
 margin: 0.5rem 0;
 }

 button {
 margin-right: 0.5rem;
 }
 `]
})
export class PostsComponent implements OnInit {
 posts: Post[] = [];
 error = '';
 postForm: FormGroup;

 constructor(
 private postsService: PostsService,
 private fb: FormBuilder
 ) {
 this.postForm = this.fb.group({
 title: ['', Validators.required],
 content: [''],
 authorId: ['', Validators.required]
 });
 }

 ngOnInit() {
 this.loadPosts();
 }

 loadPosts() {
 this.postsService.getPosts().subscribe({
 next: (posts) => this.posts = posts,
 error: (error) => this.error = 'Failed to load posts'
 });
 }

 createPost() {
 if (this.postForm.valid) {
 this.postsService.createPost({
 ...this.postForm.value,
 authorId: parseInt(this.postForm.value.authorId)
 }).subscribe({
 next: (post) => {
 this.posts.push(post);
 this.postForm.reset();
 },
 error: (error) => this.error = 'Failed to create post'
 });
 }
 }

 togglePublish(post: Post) {
 this.postsService.updatePost(post.id, {
 published: !post.published
 }).subscribe({
 next: (updatedPost) => {
 const index = this.posts.findIndex(p => p.id === post.id);
 if (index !== -1) {
 this.posts[index] = updatedPost;
 }
 },
 error: (error) => this.error = `Failed to update post ${post.id}`
 });
 }

 deletePost(id: number) {
 this.postsService.deletePost(id).subscribe({
 next: () => {
 this.posts = this.posts.filter(post => post.id !== id);
 },
 error: (error) => this.error = `Failed to delete post ${id}`
 });
 }
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →