Angular - Difference between ngmodel and #

Question

I'm still a beginner in Angular and I'm trying to understand a few concepts.

I have this simple project right here: https://stackblitz.com/edit/angular-ivy-zh8klz?file=src/app/a/a.component.html

The project has 3 components and 1 service.

• component a
• component b
• component c
• service c

All 3 components do the same thing --> they get the array from the service, add values to it via input and show them in a list.

My question(s):

• Between component b and component c, is there any difference/benefit of using #inputValue instead of [(ngModel)]? If yes, what are they?

• Between component a and component c, is there any difference/benefit of using the service directly in my html (by using public in constructor).

Component a html :

• *ngFor="let item of CService.items"

Component c html :

• *ngFor="let item of items"

--

Let me know if I was unclear with my questions.

Thank you.

Answer 1

• Between component b and component c, is there any difference/benefit of using #inputValue instead of [(ngModel)]? If yes, what are they?

Using a template reference (#inputValue) creates a ... Well, a template reference. It allows you to get the native element in plain JS. If you do that, you have to manage all of the changes by hand.

Whereas, if you use the template-driven form (ngModel), Angular handles all of that for you directly. See this as a shortcut to write less code.

• Between component a and component c, is there any difference/benefit of using the service directly in my html (by using public in constructor).

This one is very complex and long to explain, so since you're a beginner, I will reduce it to the max of my abilities.

To start off, let's talk about memory references. In your service, you have created an array, and its value is not changed during the lifecycle of your app (you do not do service.items = ...). In this particular case, both approaches are fine, since the components' items array is set to the same memory reference (they point on the same thing).

But when you assign a new value to your array (which you didn't do in this stackblitz), then you change the memory reference. In that particular case, the component B & C will cease to detect changes to the array (they aren't the same memory reference anymore), whereas the component A will still do, because the change detection of Angular will fetch the correct memory reference.

But then, if you change the change detection strategy (which is something you can do in Angular to improve performance), you will have to manually update the view yourself.

So for this second question, it all depends on your code. But the best way would be to create a getter get items() { return this.service.items; }, which will always have the correct memory reference (providing you don't change the change detection strategy), or even better, use RxJS to make it reactive items = new BehaviorSubject([]).