Angular 2 Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components to try to "extend" behavior, Angular 2 Directives enable you to compose behaviors on to your components. This includes adding event listeners that hook into services, manipulating templates, and adding more configuration to basic elements. This course helps you understand the concepts around building our Angular 2 directives and provides examples from basic directives that inspect elements to advanced structural directives that completely re-write templates.
If Angular 2 is new and the syntax foreign, you will want to check out Get Started with Angular 2 and Building Angular 2 Components.
@Input decorator allows you to pass values into your
@Directive so that you can change the value of the Directive each time that it is used. Using
@Input makes your Directives much more flexible and reusable so they can adapt to many different situations.
@Directive is used to add behavior to elements and components in your application. This makes
@Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.
You can change behaviors of element and
@Component properties based on services using
@Directives. This allows you to build
@Directives which rely on services to change behavior without the
@Component ever needing to know that the Service even exists.
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of
<template> elements, but they're easy and extremely powerful once you undrestand the concepts.
Just like passing in an array to
*ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the
*directive syntax expands into a
<template> and adds a custom
@Input based on the syntax you use so that you can use your own data.