` or any other element with the
407 | * `tooltip` selector,
408 | * like so:
409 | *
410 | * ```
411 | *
412 | * ```
413 | *
414 | * Directives can also control the instantiation, destruction, and positioning of inline template
415 | * elements:
416 | *
417 | * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
418 | * runtime.
419 | * The {@link ViewContainerRef} is created as a result of `
` element, and represents a
420 | * location in the current view
421 | * where these actions are performed.
422 | *
423 | * Views are always created as children of the current {@link ViewMetadata}, and as siblings of the
424 | * `` element. Thus a
425 | * directive in a child view cannot inject the directive that created it.
426 | *
427 | * Since directives that create views via ViewContainers are common in Angular, and using the full
428 | * `` element syntax is wordy, Angular
429 | * also supports a shorthand notation: `` and `` are
430 | * equivalent.
431 | *
432 | * Thus,
433 | *
434 | * ```
435 | *
438 | * ```
439 | *
440 | * Expands in use to:
441 | *
442 | * ```
443 | *
444 | *
445 | *
446 | *
447 | *
448 | * ```
449 | *
450 | * Notice that although the shorthand places `*foo="bar"` within the `` element, the binding for
451 | * the directive
452 | * controller is correctly instantiated on the `` element rather than the `` element.
453 | *
454 | *
455 | * ## Example
456 | *
457 | * Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
458 | *
459 | * Here is a simple directive that triggers on an `unless` selector:
460 | *
461 | * ```
462 | * @Directive({
463 | * selector: '[unless]',
464 | * properties: ['unless']
465 | * })
466 | * export class Unless {
467 | * viewContainer: ViewContainerRef;
468 | * templateRef: TemplateRef;
469 | * prevCondition: boolean;
470 | *
471 | * constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {
472 | * this.viewContainer = viewContainer;
473 | * this.templateRef = templateRef;
474 | * this.prevCondition = null;
475 | * }
476 | *
477 | * set unless(newCondition) {
478 | * if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
479 | * this.prevCondition = true;
480 | * this.viewContainer.clear();
481 | * } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
482 | * this.prevCondition = false;
483 | * this.viewContainer.create(this.templateRef);
484 | * }
485 | * }
486 | * }
487 | * ```
488 | *
489 | * We can then use this `unless` selector in a template:
490 | * ```
491 | *
494 | * ```
495 | *
496 | * Once the directive instantiates the child view, the shorthand notation for the template expands
497 | * and the result is:
498 | *
499 | * ```
500 | *
501 | *
502 | *
503 | *
504 | *
505 | *
506 | * ```
507 | *
508 | * Note also that although the `` template still exists inside the ``,
509 | * the instantiated
510 | * view occurs on the second `` which is a sibling to the `` element.
511 | */
512 | class DirectiveMetadata extends InjectableMetadata {
513 |
514 |
515 | /**
516 | * The CSS selector that triggers the instantiation of a directive.
517 | *
518 | * Angular only allows directives to trigger on CSS selectors that do not cross element
519 | * boundaries.
520 | *
521 | * `selector` may be declared as one of the following:
522 | *
523 | * - `element-name`: select by element name.
524 | * - `.class`: select by class name.
525 | * - `[attribute]`: select by attribute name.
526 | * - `[attribute=value]`: select by attribute name and value.
527 | * - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
528 | * - `selector1, selector2`: select if either `selector1` or `selector2` matches.
529 | *
530 | *
531 | * ## Example
532 | *
533 | * Suppose we have a directive with an `input[type=text]` selector.
534 | *
535 | * And the following HTML:
536 | *
537 | * ```html
538 | *