Interface Ng2Component

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:

• ChangeDetectionStrategy#OnPush sets the strategy to CheckOnce (on demand).
• ChangeDetectionStrategy#Default sets the strategy to CheckAlways.

If not supplied, the value is taken from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated.

If the policy is set to ViewEncapsulation.Emulated and the component has no styles or styleUrls specified, the policy is automatically switched to ViewEncapsulation.None.

deprecated

Since 9.0.0. With Ivy, this property is no longer necessary.

usagenotes

@Directive({
  selector: 'child-dir',
  exportAs: 'child'
})
class ChildDir {
}

@Component({
  selector: 'main',
  template: `<child-dir #c="child"></child-dir>`
})
class MainComponent {
}

Angular automatically checks host property bindings during change detection. If a binding changes, Angular updates the directive's host element.

When the key is a property of the host element, the property value is the propagated to the specified DOM property.

When the key is a static attribute in the DOM, the attribute value is propagated to the specified property in the host element.

For event handling:

• The key is the DOM event that the directive listens to. To listen to global events, add the target to the event name. The target can be window, document or body.
• The value is the statement to execute when the event occurs. If the statement evaluates to false, then preventDefault is applied on the DOM event. A handler method can refer to the $event local variable.

Angular automatically updates input properties during change detection. The inputs property defines a set of directiveProperty to bindingProperty configuration:

• directiveProperty specifies the component property where the value is written.
• bindingProperty specifies the DOM property where the value is read from.

When bindingProperty is not provided, it is assumed to be equal to directiveProperty.

usagenotes

The following example creates a component with two data-bound properties.

@Component({
  selector: 'bank-account',
  inputs: ['bankName', 'id: account-id'],
  template: `
    Bank Name: 
    Account Id: 
  `
})
class BankAccount {
  bankName: string;
  id: string;
}

When an output property emits an event, an event handler attached to that event in the template is invoked.

The outputs property defines a set of directiveProperty to bindingProperty configuration:

• directiveProperty specifies the component property that emits events.
• bindingProperty specifies the DOM property the event handler is attached to.

usagenotes

@Component({
  selector: 'child-dir',
  outputs: [ 'bankNameChange' ]
  template: `<input (input)="bankNameChange.emit($event.target.value)" />`
})
class ChildDir {
 bankNameChange: EventEmitter<string> = new EventEmitter<string>();
}

@Component({
  selector: 'main',
  template: `
     <child-dir (bankNameChange)="onBankNameChange($event)"></child-dir>
  `
})
class MainComponent {
 bankName: string;

  onBankNameChange(bankName: string) {
    this.bankName = bankName;
  }
}

Content queries are set before the ngAfterContentInit callback is called. View queries are set before the ngAfterViewInit callback is called.

usagenotes

The following example shows how queries are defined and when their results are available in lifecycle hooks:

@Component({
  selector: 'someDir',
  queries: {
    contentChildren: new ContentChildren(ChildDirective),
    viewChildren: new ViewChildren(ChildDirective)
  },
  template: '<child-directive></child-directive>'
})
class SomeDir {
  contentChildren: QueryList<ChildDirective>,
  viewChildren: QueryList<ChildDirective>

  ngAfterContentInit() {
    // contentChildren is set
  }

  ngAfterViewInit() {
    // viewChildren is set
  }
}

annotation

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.

<form>
  <input type="text">
  <input type="radio">
<form>