Angular Fundamentals: Creating Directives and Advanced Components in Angular
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 11th module: Creating Directives and Advanced Components in Angular
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
The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.
Implementing the Session Search
We previously added search textbox to our navbar, but the functionality needs to be added. Here we use Bootstrap’s modal dialog to assist us with the UI.
In the navbar component we add a new event handler to the form by binding the ngSubmit directive to our new function searchSessions.
We also create two way data binding between the search textbox and ngModel. We use our event service to do the searching for us, importing it into our navbar component and injecting it into the component constructor.
A “quick and dirty” way to see the progress we’ve made quickly is just to console log out the found sessions. Joe does this and we see the service has found one session with the name containing the word “pipe”.
Adding jQuery
In order to use the Bootstrap modal dialog we also need to use jQuery. We need to create a wrapping service for it like with did for Toastr earlier in the course.
But unlike Toastr, jQuery’s interface is much to complex to recreate, so we instantiate our jQuery token as a InjectionToken of the Object type.
Creating a Modal Component
We can now begin creating our modal component. We call the main element simple-modal and it contains a div with a list of group items inside it, each one containing the name of a matching session!
Next we create a new component for this modal, giving it the selector ‘simple-modal’. The rest of this clip is spent creating the template HTML and styling, and updating our app.module.ts
Fixing Template Parse Errors
Ouch! We are getting Error: Error: Template Parse Errors: (…)
Joe says the call stack in this error doesn’t help us. Angular is unable to parse one of our templates. Because we have only had this problem since adding the new simple modal template we can be fairly sure the problem is in there. It turns out to be a simple typo which is an easy fix.
Creating Directives -The Trigger Directive
We write a tiny bit of jQuery to display our new modal. This is simple and works but to be more sophisticated Joe recommends we create a new modal-trigger directive.
We see that we use the common CSS selector syntax, which looks like this:
selector: ‘[modal-trigger]’
This directive also injects jQuery into its constructor, and implements OnInit.
We are introduced to ElementRef in this clip, as we need to import it into our directive and inject it into the constructor.
At the end of this clip we see this is all working to our satisfaction.
Binding an ID
Although its all working, Joe says we have a few enhancements to make.
The use of the simple-modal id means we can’t use this same id more than once. Instead we use the elementId attribute in the navbar component and add elementId as a property of our simple modal component. It our simple modal template we bind to {{elementId}}.
We also add a modalId property to our modal trigger directive, and this means we no longer need to hard code the simple-modal id in the jQuery selector.
Routing to the Same Component
Joe shows us there’s a bug in our event details component that we need to fix, and how to fix it.
Using the @ViewChild Decorator
Although the relevant event details page displays when we click on the session in our new modal dialog, it isn’t closing the dialog down.
We fix this by adding a click event handler on the modal-body and implement the function with jQuery.
As an alternative the technique we saw in the Binding an ID clip, we use a ViewChild decorator. Joe says this technique is a little bit more versatile because we can add a reference to any node that we want and get a handle to it.
A variation is ViewChildren and this is useful for a list of elements with the same reference.
Creating Settings on Components
What if we do not want the modal to close in some circumstances?
We can make a closeOnBodyClick setting which gives us additional control over how the modal dialog functions. This is very easy to do.
Thanks for reading. The next module is More Components and Custom Validators.
