After breaking down Angular and its versions it’s time to do a deeper dive into the inner workings of the framework, namely directives. They are the main advantage of working with Angular and should help anyone working with the framework by providing useful, reusable solutions to both experienced users and those just starting out. Before we get into the particulars let’s look at what they actually are.
Directives are basically functions that are executed when the compiler finds them. Their role is to enhance the capabilities of HTML by attaching custom behaviors to the DOM. Since version 2.0 Angular has three types of directives:
Angular provides you with a number of built-in directives, but you can also create your own or use custom ones made by others.
Structural directives are responsible for HTML layout. They change the structure of the DOM by adding, removing, or manipulating elements. Structural directives are easily recognizable as they contain an asterisk prefix before their name. The most popular built-in structural directives are:
Attribute directives are responsible for listening to and modifying the behavior of other HTML elements, attributes, properties, and components in the DOM structure. The name comes from the fact they are applied to elements as if they were HTML attributes. The most popular built-in attribute directives are:
Components are actually directives with templates, as they are the main point of working with Angular you could say an Angular application is a tree of components. Components entail behavior (what to do with data and how to respond to user interactions) and a template (how the data is rendered). While this may sound simple it supports basic as well as advanced interactions and is essential in reducing the time and effort it takes to create an app.
All of those are updated fairly often, along with Angular itself, so if you’re looking for some features that aren’t mentioned here, check out the planned roadmaps, maybe they’ll get added soon. Obviously there’s also tons of other libraries you can find on GitHub or you can always create your own or tailor those already made to your needs. The key here is finding what will fit your workflow and what you find actually helpful. It might take a while to find the right fit for you, but most of those working with Angular will assure you it’s worth it.
The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster thanks to dozens of built-in micro features. Its graphical interface will also fix communication within your product team. Visualization is the key!