ViewChild in component vs passing in element from HTML

In my Angular 15 application, when I hit the Save button, I need to close the dialog. The dialog is only used in one location in the code...in the save event. So I can do it one of two ways:

1. Add an @ViewChild for the dialog in the TS file and access that in the save method.
2. Pass the dialog element to the save event handler from the HTML.

Is there an advantage of one vs. the other?

Both approaches are valid and can work, but each has its own advantages and disadvantages.

Approach 1: Adding a @ViewChild for the dialog in the TS file and accessing it in the save method.

Advantages:

• More TypeScript-friendly and can provide better code completion and type checking support in your editor
• You can reuse the same @ViewChild reference in other methods in the same component
• It provides a cleaner separation of concerns between the view and the component code

Disadvantages:

• Require additional code to create the ViewChild reference, which can add complexity.
• If the dialog is moved or refactored, the ViewChild reference may need to be updated accordingly.

Approach 2: Passing the dialog element to the save event handler from the HTML.

Advantages:

• Simpler and more straightforward since you are passing the element directly to the method that needs it
• Less code to implement

Disadvantages:

• Possible loss of TypeScript type checking and code completion for the dialog element
• Cannot reuse the same dialog reference within the same component.
• Less clean in terms of separation since the view is passing a reference to the component code.