Interface Directive

packages/core/src/metadata/directives.ts:113–365

 * @publicApi
 */
export interface Directive {
  /**
   * The CSS selector that identifies this directive in a template
   * and triggers instantiation of the directive.
   *
   * Declare as one of the following:
   *
   * - `element-name`: Select by element name.
   * - `.class`: Select by class name.
   * - `[attribute]`: Select by attribute name.
   * - `[attribute=value]`: Select by attribute name and value.
   * - `:not(sub_selector)`: Select only if the element does not match the `sub_selector`.
   * - `selector1, selector2`: Select if either `selector1` or `selector2` matches.
   *
   * Angular only allows directives to apply on CSS selectors that do not cross
   * element boundaries.
   *
   * For the following template HTML, a directive with an `input[type=text]` selector,
   * would be instantiated only on the `<input type="text">` element.
   *
   * ```html
   * <form>
   *   <input type="text">
   *   <input type="radio">
   * <form>
   * ```
   *
   */
  selector?: string;

  /**
   * Enumerates the set of data-bound input properties for a directive
   *
   * Angular automatically updates input properties during change detection.
   * The `inputs` property accepts either strings or object literals that configure the directive
   * properties that should be exposed as inputs.
   *
   * When an object literal is passed in, the `name` property indicates which property on the
   * class the input should write to, while the `alias` determines the name under
   * which the input will be available in template bindings. The `required` property indicates that
   * the input is required which will trigger a compile-time error if it isn't passed in when the
   * directive is used.
   *
   * When a string is passed into the `inputs` array, it can have a format of `'name'` or
   * `'name: alias'` where `name` is the property on the class that the directive should write
   * to, while the `alias` determines the name under which the input will be available in
   * template bindings. String-based input definitions are assumed to be optional.
   *
   * @usageNotes
   *
   * The following example creates a component with two data-bound properties.
   *
   * ```ts
   * @Component({
   *   selector: 'bank-account',
   *   inputs: ['bankName', {name: 'id', alias: 'account-id'}],
   *   template: `
   *     Bank Name: {{bankName}}