update-question.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Category, Question, User } from 'src/app/Types/types';
import { QuestionsService } from 'src/app/services/questions.service';
import { UsersService } from 'src/app/services/users.service';

@Component({
  selector: 'app-update-question',
  templateUrl: './update-question.component.html'
})
export class UpdateQuestionComponent {
  updateQuestion: FormGroup;
  private selectedCategory!: string;
  categories!: Category[];

  @Input() question!: Question;
  @Output() closeModal: EventEmitter<void> = new EventEmitter<void>();

  constructor(private questionController: QuestionsService) { }

  ngOnInit(): void {

    this.questionController.categories.subscribe(categoriesList => {
      this.categories = categoriesList;
    })

    this.questionController.fetchCategories();

    this.updateQuestion = new FormGroup({
      question: new FormControl(this.question.question, Validators.required)
    });
  }

  onSubmit() {
    const question = this.updateQuestion.get("question")!.value;

    const newQuestion: Question = {
      id: this.question.id,
      question: question,
      category: this.selectedCategory
    }

    this.questionController.updateQuestion(newQuestion);
    this.closeModal.emit();
  }

  onSelected(c) {
    this.selectedCategory = c;
  }
}