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, ion-input) |
|
Structural directives |
They change the DOM structure within the scope of where it is (that is, *ngIf or *ngFor) |
|
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 are typing username) by toggling its visibility. Observe the following screenshot of the app:
The GO button is there just for cosmetic purposes, and you will not need to write any code for it.