Is it acceptable to Inject one component to another in angular?

Dojo 0
Viewed 38

I have noticed that my junior developer is injecting app component to another components to update state and call methods from another components. I told her that it is not angular way,use subjects instead.iam also feeling that sometimes injecting components is far easier than using subjects.i have not find any posts explaining why this method is not encouraged?

Her code looks like

    import { ExampleComponent } from './../example/example.component';

       @Component({
         selector: 'app-home',
         templateUrl: './home.component.html',
         styleUrls: ['./home.component.css']
       })
    export class HomeComponent implements OnInit {

       constructor(example:ExampleComponent){
          example.getAllUsers()
        }
    }
angular13 angular
3 Answers

Technically you can inject the component into another component, but it won't be considered a best practice.

According to the Angular documentation:

Do limit logic in a component to only that required for the view. All other logic should be delegated to services.

and it has a bunch of good reasons why.
Here are some of them:

Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.

Removes dependencies and hides implementation details from the component.

In your case, I guess the component that's being injected into the other one, has a business logic that could be moved to a service and be reused in the other classes.
Or, if it's not a business logic, you might consider just creating a base class and inherit the other components from that.

P.S. If we dig deeper, your question can be rephrased like this:

Is it ok not to follow the best practice?

Of course, if you follow, you might get the advantages of that. And if you don't, your project might still work, but you might face lots of architectural and refactoring challenges in the long run.

Just Shadow0

If you want to argue about it, you would ask: "Does that follow any design pattern?"

Answer is no, it's not common to "Inject" one component into another, if you want to achieve communication between components, then you should rather use a Service.

Why?

The idea is not getting things to work, the idea is that if you want to onboard new members to the team for example, then they should be familiar with what they see, if you're following the standards then yeah, everything will go fine, if not, then there will be some headache regarding maintenance.

Using a service is well known best practice for such use case, it follows DI design pattern, and is also a reusable solution if implemented successfully.

Mohamed.Karkotly0

This is not the right way to communicate changes between components. Another common angular-anti-pattern way I've seen new Angular developers is to use ViewChild:

export class MyParentComponent {
    @ViewChild(MyChildComponent) childComponent: MyChildComponent;

    buttonHandler(){
         this.childComponent.doSomething();
    }

}

In the example you've provided and the example using ViewChild, a tight coupling between the components is created - MyParentComponent cannot work properly without knowing about MyChildComponent.

A more modular approach is to communicate changes using @Input() and @Output() on the components or to have the components use a common Service.

Without more details about what the HomeComponent and ExampleComponent are both responsible for I wouldn't be able to recommend one approach over the other, but either will certainly allow you to meet your requirements.

spots0
Related