Is it beter to use parameterized routes or @Input() when you have the possibility to use both?

Question

Is it beter to use parameterized routes or @Input()?

I have a RecipeList child component that takes an id, it has a parameterized route, so that's one way of getting the id. However, since it's a child component I know that the parent component can also pass it as an @Input() property to the child component.

Which of the two is preferable and performance efficient?

In the following scenario I would imagine that @Input() is more efficient:

• RecipeListComponent (parent component)
• RecipeComponent (child component)
• RecipeService

Using @Input() property

RecipeListComponent (parent):

recipes: Recipe[];

constructor(private recipeService: RecipeService)

ngOnInit() {
  this.recipes = this.recipeService.getRecipes();
}

RecipeListComponent's template (parent):

<!-- Passing recipe element to child's @Input() -->
<app-recipe *ngFor="let recipe of recipes" [routerLink]="[recipe.Id]" [recipe]="recipe"></app-recipe>

RecipeComponent (child):

@Input() recipe: Recipe;

ngOnInit() {

}

vs

parameterized routes + service

RecipeComponent (child):

recipe: Recipe;

constructor(private route: ActivatedRoute, private recipeService: RecipeService)

ngOnInit() {
  this.route.params.subscribe((params: Params) => {
     this.recipe = this.recipeService.getRecipe(+params['id']);
  })
}

RecipeListComponent's template (parent):

<!-- We don't pass a property to the child anymore -->
<app-recipe *ngFor="let recipe of recipes" [routerLink]="[recipe.Id]"></app-recipe>

RecipeListComponent (parent):

recipes: Recipe[];

constructor(private recipeService: RecipeService)

ngOnInit() {
  this.recipes = this.recipeService.getRecipes();
}

Answer 1

You should only send parameters like id, sub id, page no, page size, etc. you should think of these parameter as the base to load page after refresh or from a bookmarked link.

Use case:

1. User of our application saves the link on browser and opens them later.
2. User sends another user the page url and he opens the links

All the other values we should pass to sub components as inputs. To expand on this point, each of our modules will have 2 types of components,. They are

1. Smart components (Folder name Container)
2. Dumb components (Scene name Container)

Smart components As the name suggests, he is the smart one. He knows about the business logic of the module. he knows how to communicate with backend or other services to get informations. He knows how to process these informations.

Dumb components As name suggests, they are only presentation components. The only logic we will write in this components will be presentation logic. These dumb components will receive the data as input from smart components. The only job these dumb components have is to display them.

Communication between Dumb components to smart components There can be instances where the dumb components may need to call a backend service or fetch new values that they may be displaying. But dumb components never do business logic. they can only pass the request back to smart components via output

This may feel like too much work in the beginning. But as our application starts to grow, it will be much difficult to manage the data and create inconsistencies in our application.

Advantages of this approach.

1. Ease of debugging
2. Components will be more reusable
3. Loosely coupled elements.