Angular Fundamentals: More Components and Custom Validators

Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 12th module: More Components and Custom Validators

The previous modules are:

• Getting Started With Angular
• Creating and Communicating Between Angular Components
• Exploring the Angular Syntax
• Creating Reusable Angular Services
• Routing and Navigating Pages
• Collecting Data with Angular Forms and Validation
• Communicating Between Components
• Reusing Components with Content Projection
• Displaying Data With Pipes
• Understanding Angular’s Dependency Injection
• Creating Directives and Advanced Components in Angular

The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.

The source code accompanying this course is found on GitHub here.

Creating a Voting Component

In the previous modules we created an app that displays Angular conferences and shows a list of sessions for each event.

We want to add a voting icon to each session so that users can vote for the sessions that they like.

This involves creating upvote.component.ts with toggleVote and userHasVoted methods. The template contains a voting button and a badge for the voting count.

It uses Bootstrap heart glyphicons for the little images and ngIf logic to determine which one to show.

There are various CSS styles which you can find on GitHub.

Adding Voting Functionality

We start by updating our session list component and adding the toggleVote method.

The we create vote.service.ts with deleteVoter, addVoter and userHasVoted methods.

At the end of the clip, we see that the voting functionality works but there is a bug when we are not logged in.

Hiding Functionality Before Authentication

The voting functionality breaks if there isn’t a currently logged in user.

We simply hide the voting control if the user isn’t authenticated using ngIf.

Using @Input Setters

We want the heart glyphicon to turn red when we vote. We do this by setting the color property of the style for our glyphicon, binding to [style.color].

We previously implemented a boolean voted and string iconColor properties in our UpvoteComponent. We use an input setter, and set voted so that iconColor is red or white depending on the voted value.

Creating a Custom Validator

We previously created a component for creating new events, with textboxes for event name, event date and several inputs relating to the location of the event.

Some of the fields are mandatory and others are optional. We want to implement the rule that the user either needs to enter Address of event, city and country fields, OR enters the online URL field.

In this clip we create a custom validator directive location-validator.directive.ts.

This implements Validator and has a validate method.

Adding a Validator to Angular’s Validators

We need to add our new LocationValidator to Angular’s list of validators.

We must import NG_VALIDATORS into our directive and set the directives providers array. We have a multi-field validator and use the multi property to true inside the provider array. LocationValidator is now registered with Angular.

Implementing a Multi-field Validator

This clip makes changes to the create event component so that it uses our new LocationValidator directive so that the save button is disabled if the mandatory fields are not entered.

Then we make some more updates so that the message “You must either enter the full address OR an online Url” displays as appropriate.