How I can include same register form inside popup inside account-setting component pop up?

Question

this code inside my register component

export class RegisterComponent implements OnInit {
registrationForm : FormGroup
  isSubmitted: boolean = false
  cities:any = []
  countries:any = []
  genders = [{id:'MALE',name:'Male'},{id:'FEMALE',name:'Female'}]

  constructor(private formBuilder: FormBuilder,public authService: AuthService,
    private router: Router, private route: ActivatedRoute) {}


  ngOnInit(){
    this.initForm()
    this.allCountries()
  }


  allCountries(){
    this.authService.getCountries().subscribe(
      data => {
        // this.
        console.log("register data" , data);
        this.countries = data;

      }
      )
  }

  setCities(data) {

    console.log(data);
    let obj = this.countries.find(o => o.CountryGUID === data);
    this.cities = obj.cities

    console.log(obj)

  }

  
  initForm(){
    this.registrationForm = this.formBuilder.group({
      FirstName: ['', Validators.required],
      LastName: ['', Validators.required],
      LoginEMail: ['', Validators.required],
      MobileNumber: ['', Validators.required],
      Birthdate: ['', Validators.required],
      GenderLID: ['', Validators.required],
      CityGUID: ['', Validators.required],
      CountryGUID: ['', Validators.required],
    })

    }

    emailFormControl = new FormControl('', [
      Validators.required,
      Validators.email,
    ]);
    matcher = new MyErrorStateMatcher();



    onSubmit(){
      console.log("is submitted");
      
      console.log(this.registrationForm.value);
      this.isSubmitted = true;
      
      if(this.registrationForm.invalid){
        console.log('invalid');
        return;
      }

      this.authService.register(this.registrationForm.value).subscribe(
        data => {
          console.log("login data" , data);
        }
        )
        
      
        }
  }

How I can include same register form inside popup inside account-setting component pop up and view the data in the account-setting component outside the popup?

I want the same form to be inside account-setting component it looks like : section has a value of the register submitted looks like normal text account-setting component and button opened popup has a form inside its inputs the data values inside edit-info modal that opened in account-setting component

Answer 1

You can give the selector of this register component, like this:

Let suppose your selector name of register component is app-register, so in the template file of the component where you want to show the same register form, you have to add this selector. Example:

<app-register></app-register>

This will load the register component in your other component.