Creating a custom username input directive
Since you have gone through the process of creating a component in the preceding section, you may wonder what the difference is between a component and a directive. If you have some experience with Angular 1, you may notice that it had no definition of a component. Starting in Angular 2, there are the following three kinds of directive:
Kind |
Description |
---|---|
Components |
They have a template and a class associated with the component (that is, |
Structural directives |
They change the DOM structure within the scope of where it is (that is, |
Attribute directives |
They change the appearance of the current DOM by intercepting its display or events |
You may have a mix of both structural and attribute characteristics in the same directive. In this section, you will learn how to create an attribute directive that can prevent certain characters from being input in the Username as well as showing another DOM node (where it says You...