GPT

Component Implementation

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { UsersService } from '../../services/users.service'; import { User } 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 { UsersService } from '../../services/users.service';
import { User } from '@prisma/client';

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

 <form [formGroup]="userForm" (ngSubmit)="createUser()">
 <input formControlName="email" type="email" placeholder="Email" required>
 <input formControlName="name" placeholder="Name">
 <button type="submit" [disabled]="!userForm.valid">Add User</button>
 </form>

 <ul>
 <li *ngFor="let user of users">
 {{ user.name }} ({{ user.email }})
 <button (click)="deleteUser(user.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: 0.5rem;
 }

 button {
 margin-left: 0.5rem;
 }
 `]
})
export class UsersComponent implements OnInit {
 users: User[] = [];
 error = '';
 userForm: FormGroup;

 constructor(
 private usersService: UsersService,
 private fb: FormBuilder
 ) {
 this.userForm = this.fb.group({
 email: ['', [Validators.required, Validators.email]],
 name: ['']
 });
 }

 ngOnInit() {
 this.loadUsers();
 }

 loadUsers() {
 this.usersService.getUsers().subscribe({
 next: (users) => this.users = users,
 error: (error) => this.error = 'Failed to load users'
 });
 }

 createUser() {
 if (this.userForm.valid) {
 this.usersService.createUser(this.userForm.value).subscribe({
 next: (user) => {
 this.users.push(user);
 this.userForm.reset();
 },
 error: (error) => this.error = 'Failed to create user'
 });
 }
 }

 deleteUser(id: number) {
 this.usersService.deleteUser(id).subscribe({
 next: () => {
 this.users = this.users.filter(user => user.id !== id);
 },
 error: (error) => this.error = `Failed to delete user ${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 →