How to use a single modal with form across all components in Angular 9?

Question

Angular Version :9 (using ngbModal & ngbootstrap)

I am working on a way to create login & register functionality in my angular application

As of now, I have the login code inside my NavbarComponent which is visible throughout all other components.

NavbarComponent.ts

constructor(
        private formBuilder: FormBuilder,
        private userService: UserService,
        private sessionService: SessionStorageService,
        private constant: AppConstants,
        private modalService: NgbModal,
      ) {
        this.createLoginForm();
      }     
    
openLoginModal(content: any) {
            this.createLoginForm()
            this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', backdrop: 'static' 
            }).result.then((result) => {
              this.closeResult = `Closed with: ${result}`;
              this.login()
            }, (reason) => {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            });
          }
   
createLoginForm() {
        this.loginform = this.formBuilder.group({
          email: [null, [Validators.required, Validators.pattern(/\S+@\S+\.\S+/)]],
          password: [null, [Validators.required,
          Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]]
        })
      }

on modal submit, login method will add data to session storage & everything works

Now, I want people to be able to view the content without login & only need login if they want to add something. Hence, I want this login functionality to be in all my components.

When user clicks a POST button on some other component, this login modal should be displayed & form submission must happen on login click, nothing else in the existing page should change.

I could have separate modals in all components but that would immensely violate the DRY principle I researched a lot on this, some suggested to create a different module for it, some suggested a new component. I didn't find anything case specific.

So, after understanding the case what would be the optimal solution for this?

Edit :- navbar.component.html has a login button. On clicking that, login modal will appear(which has a login form) I want to open this modal(with form and other features of modal) by clicking the add button which is on some xyz.component.html

P.S: Thanks for your time. I would also welcome changes on an atomic level if I am doing something wrong.

Answer 1

If you're importing your navigation component in every module of your application it should then be in a shared module. If that's the case, you should just add a login component wich would be a modal itself. Then with a simple onclick function you open that component.

If it's not in a shared module I would just create a login component and place it in the same module as your navigation. By clicking on login in navigation, your login component would also be availible.