GPT

Component Examples

// src/app/components/user-list/user-list.component.ts import { Component, OnInit } from '@angular/core'; import { UserService } from '../../services/user.service'; import { type User, type NewUser } from '../../db/schem

Prompt text

Original English text. Replace placeholders with your own details.

// src/app/components/user-list/user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { type User, type NewUser } from '../../db/schema';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
 selector: 'app-user-list',
 template: `
 <div>
 <h2>Users</h2>

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

 <div *ngIf="loading">Loading...</div>
 <div *ngIf="error" class="error">{{ error }}</div>

 <ul *ngIf="users.length; else noUsers">
 <li *ngFor="let user of users">
 {{ user.name }} ({{ user.email }})
 <button (click)="deleteUser(user.id)" [disabled]="loading">
 Delete
 </button>
 </li>
 </ul>

 <ng-template #noUsers>
 <p>No users found.</p>
 </ng-template>
 </div>
 `,
})
export class UserListComponent implements OnInit {
 users: User[] = [];
 loading = false;
 error: string | null = null;
 userForm: FormGroup;

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

 ngOnInit(): void {
 this.loadUsers();
 }

 loadUsers(): void {
 this.loading = true;
 this.error = null;

 this.userService.getUsers().subscribe({
 next: (users) => {
 this.users = users;
 this.loading = false;
 },
 error: (err) => {
 this.error = err.message;
 this.loading = false;
 },
 });
 }

 onSubmit(): void {
 if (this.userForm.valid) {
 this.loading = true;
 this.error = null;

 this.userService.createUser(this.userForm.value).subscribe({
 next: (user) => {
 this.users.push(user);
 this.userForm.reset();
 this.loading = false;
 },
 error: (err) => {
 this.error = err.message;
 this.loading = false;
 },
 });
 }
 }

 deleteUser(id: number): void {
 this.loading = true;
 this.error = null;

 this.userService.deleteUser(id).subscribe({
 next: () => {
 this.users = this.users.filter(u => u.id !== id);
 this.loading = false;
 },
 error: (err) => {
 this.error = err.message;
 this.loading = false;
 },
 });
 }
}

// src/app/components/user-detail/user-detail.component.ts
@Component({
 selector: 'app-user-detail',
 template: `
 <div *ngIf="user">
 <h2>Edit User</h2>

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
 <input
 formControlName="name"
 placeholder="Name"
 required
 />
 <input
 formControlName="email"
 type="email"
 placeholder="Email"
 required
 />
 <button type="submit" [disabled]="userForm.invalid || loading">
 Update User
 </button>
 </form>

 <div *ngIf="loading">Loading...</div>
 <div *ngIf="error" class="error">{{ error }}</div>
 </div>
 `,
})
export class UserDetailComponent implements OnInit {
 @Input() id!: number;
 user: User | null = null;
 loading = false;
 error: string | null = null;
 userForm: FormGroup;

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

 ngOnInit(): void {
 this.loadUser();
 }

 loadUser(): void {
 this.loading = true;
 this.error = null;

 this.userService.getUserById(this.id).subscribe({
 next: (user) => {
 if (user) {
 this.user = user;
 this.userForm.patchValue(user);
 }
 this.loading = false;
 },
 error: (err) => {
 this.error = err.message;
 this.loading = false;
 },
 });
 }

 onSubmit(): void {
 if (this.userForm.valid) {
 this.loading = true;
 this.error = null;

 this.userService.updateUser(this.id, this.userForm.value).subscribe({
 next: (user) => {
 this.user = user;
 this.loading = false;
 },
 error: (err) => {
 this.error = err.message;
 this.loading = false;
 },
 });
 }
 }
}

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 →