What Are We Learning?

• Show and hide components using routes as opposed to input and output properties
• Keep those components in communication with each other by passing data in the route
• Learn how to set up routes in the routing module
• Use routerLink to set up click events and pass data to the route

In  another tutorial I published recently, I walked through using input and output properties to pass data around your Angular app. We also used those properties to manage what the user could see in the UI. This setup definitely worked and is a great way to get child components the data they need, but it’s not very clean to look at. We’ve got inputs scattered everywhere, and it’s a little repetitive.

For example, this is the app.component.html in that project:

<app-toolbar></app-toolbar>


<app-habit-form *ngIf="formOpen; else allHabits" 
  (onExit)="closeForm()"
  [habit]="editHabit"></app-habit-form>

<ng-template #allHabits>
  <app-all-habits 
    (addEvent)="onAdding()"
    (editEvent)="onEditing($event)"></app-all-habits>
</ng-template>

We’ve got a lot of logic being managed by the app component in here, and it’s taking on the job of directing traffic. We also have the issue of needing to pass data up to the app component from all-habits just so we can pass it back down to the habit-form component. The app component shouldn’t need to care about that data at all!

#angular #javascript