/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {ChangeDetectionStrategy} from '../change_detection/constants'; import {Provider} from '../di'; import {Type} from '../interface/type'; import {compileComponent as render3CompileComponent, compileDirective as render3CompileDirective} from '../render3/jit/directive'; import {compilePipe as render3CompilePipe} from '../render3/jit/pipe'; import {makeDecorator, makePropDecorator, TypeDecorator} from '../util/decorators'; import {noop} from '../util/noop'; import {ViewEncapsulation} from './view'; /** * Type of the Directive decorator / constructor function. * @publicApi */ export interface DirectiveDecorator { /** * Decorator that marks a class as an Angular directive. * You can define your own directives to attach custom behavior to elements in the DOM. * * The options provide configuration metadata that determines * how the directive should be processed, instantiated and used at * runtime. * * Directive classes, like component classes, can implement * [life-cycle hooks](guide/lifecycle-hooks) to influence their configuration and behavior. * * * @usageNotes * To define a directive, mark the class with the decorator and provide metadata. * * ```ts * import {Directive} from '@angular/core'; * * @Directive({ * selector: 'my-directive', * }) * export class MyDirective { * ... * } * ``` * * ### Declaring directives * * Directives are [declarables](guide/glossary#declarable). * They must be declared by an NgModule * in order to be usable in an app. * * A directive must belong to exactly one NgModule. Do not re-declare * a directive imported from another module. * List the directive class in the `declarations` field of an NgModule. * * ```ts * declarations: [ * AppComponent, * MyDirective * ], * ``` * * @Annotation */ (obj?: Directive): TypeDecorator; /** * See the `Directive` decorator. */ new(obj?: Directive): Directive; } /** * Directive decorator and metadata. * * @Annotation * @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 `` element. * * ```html *