`,
+ * styles: [`
+ * .button {
+ * width: 120px;
+ * border: medium solid black;
* }
- * }
- * }
- * ```
*
- * The events payload can be accessed by the parameter `$event` on the components output event
- * handler:
+ * .active {
+ * background-color: red;
+ * }
*
- * ```
- *
- * ```
+ * .disabled {
+ * color: gray;
+ * border: medium solid gray;
+ * }
+ * `],
+ * directives: [NgClass]
+ * })
+ * class ToggleButton {
+ * isOn = false;
+ * isDisabled = false;
*
- * Uses Rx.Observable but provides an adapter to make it work as specified here:
- * https://github.com/jhusain/observable-spec
+ * toggle(newState) {
+ * if (!this.isDisabled) {
+ * this.isOn = newState;
+ * }
+ * }
+ * }
+ * ```
*
- * Once a reference implementation of the spec is available, switch to it.
* @stable
*/
- var EventEmitter$1 = (function (_super) {
- __extends(EventEmitter$1, _super);
- /**
- * Creates an instance of [EventEmitter], which depending on [isAsync],
- * delivers events synchronously or asynchronously.
- */
- function EventEmitter$1(isAsync) {
- if (isAsync === void 0) { isAsync = false; }
- _super.call(this);
- this.__isAsync = isAsync;
- }
- EventEmitter$1.prototype.emit = function (value) { _super.prototype.next.call(this, value); };
- /**
- * @deprecated - use .emit(value) instead
- */
- EventEmitter$1.prototype.next = function (value) { _super.prototype.next.call(this, value); };
- EventEmitter$1.prototype.subscribe = function (generatorOrNext, error, complete) {
- var schedulerFn;
- var errorFn = function (err) { return null; };
- var completeFn = function () { return null; };
- if (generatorOrNext && typeof generatorOrNext === 'object') {
- schedulerFn = this.__isAsync ? function (value /** TODO #9100 */) {
- setTimeout(function () { return generatorOrNext.next(value); });
- } : function (value /** TODO #9100 */) { generatorOrNext.next(value); };
- if (generatorOrNext.error) {
- errorFn = this.__isAsync ? function (err) { setTimeout(function () { return generatorOrNext.error(err); }); } :
- function (err) { generatorOrNext.error(err); };
- }
- if (generatorOrNext.complete) {
- completeFn = this.__isAsync ? function () { setTimeout(function () { return generatorOrNext.complete(); }); } :
- function () { generatorOrNext.complete(); };
- }
- }
- else {
- schedulerFn = this.__isAsync ? function (value /** TODO #9100 */) {
- setTimeout(function () { return generatorOrNext(value); });
- } : function (value /** TODO #9100 */) { generatorOrNext(value); };
- if (error) {
- errorFn =
- this.__isAsync ? function (err) { setTimeout(function () { return error(err); }); } : function (err) { error(err); };
- }
- if (complete) {
- completeFn =
- this.__isAsync ? function () { setTimeout(function () { return complete(); }); } : function () { complete(); };
- }
- }
- return _super.prototype.subscribe.call(this, schedulerFn, errorFn, completeFn);
- };
- return EventEmitter$1;
- }(rxjs_Subject.Subject));
- var controlNameBinding = {
- provide: NgControl,
- useExisting: _angular_core.forwardRef(function () { return NgControlName; })
- };
- var NgControlName = (function (_super) {
- __extends(NgControlName, _super);
- function NgControlName(_parent, _validators, _asyncValidators, valueAccessors) {
- _super.call(this);
- this._parent = _parent;
- this._validators = _validators;
- this._asyncValidators = _asyncValidators;
- /** @internal */
- this.update = new EventEmitter$1();
- this._added = false;
- this.valueAccessor = selectValueAccessor(this, valueAccessors);
- }
- NgControlName.prototype.ngOnChanges = function (changes) {
- if (!this._added) {
- this.formDirective.addControl(this);
- this._added = true;
- }
- if (isPropertyUpdated(changes, this.viewModel)) {
- this.viewModel = this.model;
- this.formDirective.updateModel(this, this.model);
- }
- };
- NgControlName.prototype.ngOnDestroy = function () { this.formDirective.removeControl(this); };
- NgControlName.prototype.viewToModelUpdate = function (newValue) {
- this.viewModel = newValue;
- this.update.emit(newValue);
- };
- Object.defineProperty(NgControlName.prototype, "path", {
- get: function () { return controlPath(this.name, this._parent); },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlName.prototype, "formDirective", {
- get: function () { return this._parent.formDirective; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlName.prototype, "validator", {
- get: function () { return composeValidators(this._validators); },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlName.prototype, "asyncValidator", {
- get: function () {
- return composeAsyncValidators(this._asyncValidators);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlName.prototype, "control", {
- get: function () { return this.formDirective.getControl(this); },
- enumerable: true,
- configurable: true
- });
- return NgControlName;
- }(NgControl));
- /** @nocollapse */
- NgControlName.decorators = [
- { type: _angular_core.Directive, args: [{
- selector: '[ngControl]',
- providers: [controlNameBinding],
- inputs: ['name: ngControl', 'model: ngModel'],
- outputs: ['update: ngModelChange'],
- exportAs: 'ngForm'
- },] },
- ];
- /** @nocollapse */
- NgControlName.ctorParameters = [
- { type: ControlContainer, decorators: [{ type: _angular_core.Host }, { type: _angular_core.SkipSelf },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_VALIDATORS,] },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_ASYNC_VALIDATORS,] },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_VALUE_ACCESSOR,] },] },
- ];
- var NgControlStatus = (function () {
- function NgControlStatus(cd) {
- this._cd = cd;
+ var NgClass = (function () {
+ function NgClass(_iterableDiffers, _keyValueDiffers, _ngEl, _renderer) {
+ this._iterableDiffers = _iterableDiffers;
+ this._keyValueDiffers = _keyValueDiffers;
+ this._ngEl = _ngEl;
+ this._renderer = _renderer;
+ this._initialClasses = [];
}
- Object.defineProperty(NgControlStatus.prototype, "ngClassUntouched", {
- get: function () {
- return isPresent(this._cd.control) ? this._cd.control.untouched : false;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlStatus.prototype, "ngClassTouched", {
- get: function () {
- return isPresent(this._cd.control) ? this._cd.control.touched : false;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlStatus.prototype, "ngClassPristine", {
- get: function () {
- return isPresent(this._cd.control) ? this._cd.control.pristine : false;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlStatus.prototype, "ngClassDirty", {
- get: function () {
- return isPresent(this._cd.control) ? this._cd.control.dirty : false;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgControlStatus.prototype, "ngClassValid", {
- get: function () {
- return isPresent(this._cd.control) ? this._cd.control.valid : false;
+ Object.defineProperty(NgClass.prototype, "initialClasses", {
+ set: function (v) {
+ this._applyInitialClasses(true);
+ this._initialClasses = isPresent(v) && isString(v) ? v.split(' ') : [];
+ this._applyInitialClasses(false);
+ this._applyClasses(this._rawClass, false);
},
enumerable: true,
configurable: true
});
- Object.defineProperty(NgControlStatus.prototype, "ngClassInvalid", {
- get: function () {
- return isPresent(this._cd.control) ? !this._cd.control.valid : false;
+ Object.defineProperty(NgClass.prototype, "ngClass", {
+ set: function (v) {
+ this._cleanupClasses(this._rawClass);
+ if (isString(v)) {
+ v = v.split(' ');
+ }
+ this._rawClass = v;
+ this._iterableDiffer = null;
+ this._keyValueDiffer = null;
+ if (isPresent(v)) {
+ if (isListLikeIterable(v)) {
+ this._iterableDiffer = this._iterableDiffers.find(v).create(null);
+ }
+ else {
+ this._keyValueDiffer = this._keyValueDiffers.find(v).create(null);
+ }
+ }
},
enumerable: true,
configurable: true
});
- return NgControlStatus;
- }());
- /** @nocollapse */
- NgControlStatus.decorators = [
- { type: _angular_core.Directive, args: [{
- selector: '[ngControl],[ngModel],[ngFormControl]',
- host: {
- '[class.ng-untouched]': 'ngClassUntouched',
- '[class.ng-touched]': 'ngClassTouched',
- '[class.ng-pristine]': 'ngClassPristine',
- '[class.ng-dirty]': 'ngClassDirty',
- '[class.ng-valid]': 'ngClassValid',
- '[class.ng-invalid]': 'ngClassInvalid'
- }
- },] },
- ];
- /** @nocollapse */
- NgControlStatus.ctorParameters = [
- { type: NgControl, decorators: [{ type: _angular_core.Self },] },
- ];
- /**
- * Indicates that a Control is valid, i.e. that no errors exist in the input value.
- */
- var VALID = 'VALID';
- /**
- * Indicates that a Control is invalid, i.e. that an error exists in the input value.
- */
- var INVALID = 'INVALID';
- /**
- * Indicates that a Control is pending, i.e. that async validation is occurring and
- * errors are not yet available for the input value.
- */
- var PENDING = 'PENDING';
- function _find(control, path) {
- if (isBlank(path))
- return null;
- if (!(path instanceof Array)) {
- path = path.split('/');
- }
- if (path instanceof Array && ListWrapper.isEmpty(path))
- return null;
- return path.reduce(function (v, name) {
- if (v instanceof ControlGroup) {
- return isPresent(v.controls[name]) ? v.controls[name] : null;
+ NgClass.prototype.ngDoCheck = function () {
+ if (isPresent(this._iterableDiffer)) {
+ var changes = this._iterableDiffer.diff(this._rawClass);
+ if (isPresent(changes)) {
+ this._applyIterableChanges(changes);
+ }
}
- else if (v instanceof ControlArray) {
- var index = name;
- return isPresent(v.at(index)) ? v.at(index) : null;
+ if (isPresent(this._keyValueDiffer)) {
+ var changes = this._keyValueDiffer.diff(this._rawClass);
+ if (isPresent(changes)) {
+ this._applyKeyValueChanges(changes);
+ }
}
- else {
- return null;
+ };
+ NgClass.prototype._cleanupClasses = function (rawClassVal) {
+ this._applyClasses(rawClassVal, true);
+ this._applyInitialClasses(false);
+ };
+ NgClass.prototype._applyKeyValueChanges = function (changes) {
+ var _this = this;
+ changes.forEachAddedItem(function (record) { _this._toggleClass(record.key, record.currentValue); });
+ changes.forEachChangedItem(function (record) { _this._toggleClass(record.key, record.currentValue); });
+ changes.forEachRemovedItem(function (record) {
+ if (record.previousValue) {
+ _this._toggleClass(record.key, false);
+ }
+ });
+ };
+ NgClass.prototype._applyIterableChanges = function (changes) {
+ var _this = this;
+ changes.forEachAddedItem(function (record) { _this._toggleClass(record.item, true); });
+ changes.forEachRemovedItem(function (record) { _this._toggleClass(record.item, false); });
+ };
+ NgClass.prototype._applyInitialClasses = function (isCleanup) {
+ var _this = this;
+ this._initialClasses.forEach(function (className) { return _this._toggleClass(className, !isCleanup); });
+ };
+ NgClass.prototype._applyClasses = function (rawClassVal, isCleanup) {
+ var _this = this;
+ if (isPresent(rawClassVal)) {
+ if (isArray(rawClassVal)) {
+ rawClassVal.forEach(function (className) { return _this._toggleClass(className, !isCleanup); });
+ }
+ else if (rawClassVal instanceof Set) {
+ rawClassVal.forEach(function (className) { return _this._toggleClass(className, !isCleanup); });
+ }
+ else {
+ StringMapWrapper.forEach(rawClassVal, function (expVal, className) {
+ if (isPresent(expVal))
+ _this._toggleClass(className, !isCleanup);
+ });
+ }
}
- }, control);
- }
- function toObservable(r) {
- return isPromise(r) ? rxjs_observable_PromiseObservable.PromiseObservable.create(r) : r;
- }
- /**
- * @experimental
- */
- var AbstractControl = (function () {
- function AbstractControl(validator, asyncValidator) {
- this.validator = validator;
- this.asyncValidator = asyncValidator;
- this._pristine = true;
- this._touched = false;
- }
- Object.defineProperty(AbstractControl.prototype, "value", {
- get: function () { return this._value; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "status", {
- get: function () { return this._status; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "valid", {
- get: function () { return this._status === VALID; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "errors", {
- /**
- * Returns the errors of this control.
- */
- get: function () { return this._errors; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "pristine", {
- get: function () { return this._pristine; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "dirty", {
- get: function () { return !this.pristine; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "touched", {
- get: function () { return this._touched; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "untouched", {
- get: function () { return !this._touched; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(AbstractControl.prototype, "valueChanges", {
- get: function () { return this._valueChanges; },
+ };
+ NgClass.prototype._toggleClass = function (className, enabled) {
+ className = className.trim();
+ if (className.length > 0) {
+ if (className.indexOf(' ') > -1) {
+ var classes = className.split(/\s+/g);
+ for (var i = 0, len = classes.length; i < len; i++) {
+ this._renderer.setElementClass(this._ngEl.nativeElement, classes[i], enabled);
+ }
+ }
+ else {
+ this._renderer.setElementClass(this._ngEl.nativeElement, className, enabled);
+ }
+ }
+ };
+ NgClass.decorators = [
+ { type: _angular_core.Directive, args: [{ selector: '[ngClass]' },] },
+ ];
+ /** @nocollapse */
+ NgClass.ctorParameters = [
+ { type: _angular_core.IterableDiffers, },
+ { type: _angular_core.KeyValueDiffers, },
+ { type: _angular_core.ElementRef, },
+ { type: _angular_core.Renderer, },
+ ];
+ NgClass.propDecorators = {
+ 'initialClasses': [{ type: _angular_core.Input, args: ['class',] },],
+ 'ngClass': [{ type: _angular_core.Input },],
+ };
+ return NgClass;
+ }());
+
+ var NgForRow = (function () {
+ function NgForRow($implicit, index, count) {
+ this.$implicit = $implicit;
+ this.index = index;
+ this.count = count;
+ }
+ Object.defineProperty(NgForRow.prototype, "first", {
+ get: function () { return this.index === 0; },
enumerable: true,
configurable: true
});
- Object.defineProperty(AbstractControl.prototype, "statusChanges", {
- get: function () { return this._statusChanges; },
+ Object.defineProperty(NgForRow.prototype, "last", {
+ get: function () { return this.index === this.count - 1; },
enumerable: true,
configurable: true
});
- Object.defineProperty(AbstractControl.prototype, "pending", {
- get: function () { return this._status == PENDING; },
+ Object.defineProperty(NgForRow.prototype, "even", {
+ get: function () { return this.index % 2 === 0; },
enumerable: true,
configurable: true
});
- AbstractControl.prototype.markAsTouched = function () { this._touched = true; };
- AbstractControl.prototype.markAsDirty = function (_a) {
- var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
- onlySelf = normalizeBool(onlySelf);
- this._pristine = false;
- if (isPresent(this._parent) && !onlySelf) {
- this._parent.markAsDirty({ onlySelf: onlySelf });
- }
- };
- AbstractControl.prototype.markAsPending = function (_a) {
- var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
- onlySelf = normalizeBool(onlySelf);
- this._status = PENDING;
- if (isPresent(this._parent) && !onlySelf) {
- this._parent.markAsPending({ onlySelf: onlySelf });
- }
- };
- AbstractControl.prototype.setParent = function (parent) { this._parent = parent; };
- AbstractControl.prototype.updateValueAndValidity = function (_a) {
- var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent;
- onlySelf = normalizeBool(onlySelf);
- emitEvent = isPresent(emitEvent) ? emitEvent : true;
- this._updateValue();
- this._errors = this._runValidator();
- this._status = this._calculateStatus();
- if (this._status == VALID || this._status == PENDING) {
- this._runAsyncValidator(emitEvent);
- }
- if (emitEvent) {
- this._valueChanges.emit(this._value);
- this._statusChanges.emit(this._status);
- }
- if (isPresent(this._parent) && !onlySelf) {
- this._parent.updateValueAndValidity({ onlySelf: onlySelf, emitEvent: emitEvent });
- }
- };
- AbstractControl.prototype._runValidator = function () {
- return isPresent(this.validator) ? this.validator(this) : null;
- };
- AbstractControl.prototype._runAsyncValidator = function (emitEvent) {
- var _this = this;
- if (isPresent(this.asyncValidator)) {
- this._status = PENDING;
- this._cancelExistingSubscription();
- var obs = toObservable(this.asyncValidator(this));
- this._asyncValidationSubscription = obs.subscribe({ next: function (res) { return _this.setErrors(res, { emitEvent: emitEvent }); } });
- }
- };
- AbstractControl.prototype._cancelExistingSubscription = function () {
- if (isPresent(this._asyncValidationSubscription)) {
- this._asyncValidationSubscription.unsubscribe();
- }
- };
- /**
- * Sets errors on a control.
- *
- * This is used when validations are run not automatically, but manually by the user.
- *
- * Calling `setErrors` will also update the validity of the parent control.
- *
- * ## Usage
- *
- * ```
- * var login = new Control("someLogin");
- * login.setErrors({
- * "notUnique": true
- * });
- *
- * expect(login.valid).toEqual(false);
- * expect(login.errors).toEqual({"notUnique": true});
- *
- * login.updateValue("someOtherLogin");
- *
- * expect(login.valid).toEqual(true);
- * ```
- */
- AbstractControl.prototype.setErrors = function (errors, _a) {
- var emitEvent = (_a === void 0 ? {} : _a).emitEvent;
- emitEvent = isPresent(emitEvent) ? emitEvent : true;
- this._errors = errors;
- this._status = this._calculateStatus();
- if (emitEvent) {
- this._statusChanges.emit(this._status);
- }
- if (isPresent(this._parent)) {
- this._parent._updateControlsErrors();
- }
- };
- AbstractControl.prototype.find = function (path) { return _find(this, path); };
- AbstractControl.prototype.getError = function (errorCode, path) {
- if (path === void 0) { path = null; }
- var control = isPresent(path) && !ListWrapper.isEmpty(path) ? this.find(path) : this;
- if (isPresent(control) && isPresent(control._errors)) {
- return StringMapWrapper.get(control._errors, errorCode);
- }
- else {
- return null;
- }
- };
- AbstractControl.prototype.hasError = function (errorCode, path) {
- if (path === void 0) { path = null; }
- return isPresent(this.getError(errorCode, path));
- };
- Object.defineProperty(AbstractControl.prototype, "root", {
- get: function () {
- var x = this;
- while (isPresent(x._parent)) {
- x = x._parent;
- }
- return x;
- },
+ Object.defineProperty(NgForRow.prototype, "odd", {
+ get: function () { return !this.even; },
enumerable: true,
configurable: true
});
- /** @internal */
- AbstractControl.prototype._updateControlsErrors = function () {
- this._status = this._calculateStatus();
- if (isPresent(this._parent)) {
- this._parent._updateControlsErrors();
- }
- };
- /** @internal */
- AbstractControl.prototype._initObservables = function () {
- this._valueChanges = new EventEmitter$1();
- this._statusChanges = new EventEmitter$1();
- };
- AbstractControl.prototype._calculateStatus = function () {
- if (isPresent(this._errors))
- return INVALID;
- if (this._anyControlsHaveStatus(PENDING))
- return PENDING;
- if (this._anyControlsHaveStatus(INVALID))
- return INVALID;
- return VALID;
- };
- return AbstractControl;
+ return NgForRow;
}());
/**
- * Defines a part of a form that cannot be divided into other controls. `Control`s have values and
- * validation state, which is determined by an optional validation function.
+ * The `NgFor` directive instantiates a template once per item from an iterable. The context for
+ * each instantiated template inherits from the outer context with the given loop variable set
+ * to the current item from the iterable.
*
- * `Control` is one of the three fundamental building blocks used to define forms in Angular, along
- * with {@link ControlGroup} and {@link ControlArray}.
+ * ### Local Variables
*
- * ## Usage
+ * `NgFor` provides several exported values that can be aliased to local variables:
*
- * By default, a `Control` is created for every `` or other form component.
- * With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
- * bound to a DOM element instead. This `Control` can be configured with a custom
- * validation function.
+ * * `index` will be set to the current loop iteration for each template context.
+ * * `first` will be set to a boolean value indicating whether the item is the first one in the
+ * iteration.
+ * * `last` will be set to a boolean value indicating whether the item is the last one in the
+ * iteration.
+ * * `even` will be set to a boolean value indicating whether this item has an even index.
+ * * `odd` will be set to a boolean value indicating whether this item has an odd index.
*
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
+ * ### Change Propagation
*
- * @experimental
- */
- var Control = (function (_super) {
- __extends(Control, _super);
- function Control(value, validator, asyncValidator) {
- if (value === void 0) { value = null; }
- if (validator === void 0) { validator = null; }
- if (asyncValidator === void 0) { asyncValidator = null; }
- _super.call(this, validator, asyncValidator);
- this._value = value;
- this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
- this._initObservables();
- }
- /**
- * Set the value of the control to `value`.
- *
- * If `onlySelf` is `true`, this change will only affect the validation of this `Control`
- * and not its parent component. If `emitEvent` is `true`, this change will cause a
- * `valueChanges` event on the `Control` to be emitted. Both of these options default to
- * `false`.
- *
- * If `emitModelToViewChange` is `true`, the view will be notified about the new value
- * via an `onChange` event. This is the default behavior if `emitModelToViewChange` is not
- * specified.
- */
- Control.prototype.updateValue = function (value, _a) {
- var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent, emitModelToViewChange = _b.emitModelToViewChange;
- emitModelToViewChange = isPresent(emitModelToViewChange) ? emitModelToViewChange : true;
- this._value = value;
- if (isPresent(this._onChange) && emitModelToViewChange)
- this._onChange(this._value);
- this.updateValueAndValidity({ onlySelf: onlySelf, emitEvent: emitEvent });
- };
- /**
- * @internal
- */
- Control.prototype._updateValue = function () { };
- /**
- * @internal
- */
- Control.prototype._anyControlsHaveStatus = function (status) { return false; };
- /**
- * Register a listener for change events.
- */
- Control.prototype.registerOnChange = function (fn) { this._onChange = fn; };
- return Control;
- }(AbstractControl));
- /**
- * Defines a part of a form, of fixed length, that can contain other controls.
+ * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
*
- * A `ControlGroup` aggregates the values of each {@link Control} in the group.
- * The status of a `ControlGroup` depends on the status of its children.
- * If one of the controls in a group is invalid, the entire group is invalid.
- * Similarly, if a control changes its value, the entire group changes as well.
+ * * When an item is added, a new instance of the template is added to the DOM.
+ * * When an item is removed, its template instance is removed from the DOM.
+ * * When items are reordered, their respective templates are reordered in the DOM.
+ * * Otherwise, the DOM element for that item will remain the same.
*
- * `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular,
- * along with {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
- * controls, but is of variable length.
+ * Angular uses object identity to track insertions and deletions within the iterator and reproduce
+ * those changes in the DOM. This has important implications for animations and any stateful
+ * controls
+ * (such as `` elements which accept user input) that are present. Inserted rows can be
+ * animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such
+ * as user input.
*
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
+ * It is possible for the identities of elements in the iterator to change while the data does not.
+ * This can happen, for example, if the iterator produced from an RPC to the server, and that
+ * RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
+ * different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
+ * elements were deleted and all new elements inserted). This is an expensive operation and should
+ * be avoided if possible.
*
- * @experimental
- */
- var ControlGroup = (function (_super) {
- __extends(ControlGroup, _super);
- function ControlGroup(controls, optionals, validator, asyncValidator) {
- if (optionals === void 0) { optionals = null; }
- if (validator === void 0) { validator = null; }
- if (asyncValidator === void 0) { asyncValidator = null; }
- _super.call(this, validator, asyncValidator);
- this.controls = controls;
- this._optionals = isPresent(optionals) ? optionals : {};
- this._initObservables();
- this._setParentForControls();
- this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
- }
- /**
- * Register a control with the group's list of controls.
- */
- ControlGroup.prototype.registerControl = function (name, control) {
- this.controls[name] = control;
- control.setParent(this);
- };
- /**
- * Add a control to this group.
- */
- ControlGroup.prototype.addControl = function (name, control) {
- this.registerControl(name, control);
- this.updateValueAndValidity();
- };
- /**
- * Remove a control from this group.
- */
- ControlGroup.prototype.removeControl = function (name) {
- StringMapWrapper.delete(this.controls, name);
- this.updateValueAndValidity();
- };
- /**
- * Mark the named control as non-optional.
- */
- ControlGroup.prototype.include = function (controlName) {
- StringMapWrapper.set(this._optionals, controlName, true);
- this.updateValueAndValidity();
- };
- /**
- * Mark the named control as optional.
- */
- ControlGroup.prototype.exclude = function (controlName) {
- StringMapWrapper.set(this._optionals, controlName, false);
- this.updateValueAndValidity();
- };
- /**
- * Check whether there is a control with the given name in the group.
- */
- ControlGroup.prototype.contains = function (controlName) {
- var c = StringMapWrapper.contains(this.controls, controlName);
- return c && this._included(controlName);
- };
- /** @internal */
- ControlGroup.prototype._setParentForControls = function () {
- var _this = this;
- StringMapWrapper.forEach(this.controls, function (control, name) { control.setParent(_this); });
- };
- /** @internal */
- ControlGroup.prototype._updateValue = function () { this._value = this._reduceValue(); };
- /** @internal */
- ControlGroup.prototype._anyControlsHaveStatus = function (status) {
- var _this = this;
- var res = false;
- StringMapWrapper.forEach(this.controls, function (control, name) {
- res = res || (_this.contains(name) && control.status == status);
- });
- return res;
- };
- /** @internal */
- ControlGroup.prototype._reduceValue = function () {
- return this._reduceChildren({}, function (acc, control, name) {
- acc[name] = control.value;
- return acc;
- });
- };
- /** @internal */
- ControlGroup.prototype._reduceChildren = function (initValue, fn) {
- var _this = this;
- var res = initValue;
- StringMapWrapper.forEach(this.controls, function (control, name) {
- if (_this._included(name)) {
- res = fn(res, control, name);
- }
- });
- return res;
- };
- /** @internal */
- ControlGroup.prototype._included = function (controlName) {
- var isOptional = StringMapWrapper.contains(this._optionals, controlName);
- return !isOptional || StringMapWrapper.get(this._optionals, controlName);
- };
- return ControlGroup;
- }(AbstractControl));
- /**
- * Defines a part of a form, of variable length, that can contain other controls.
+ * To customize the default tracking algorithm, `NgFor` supports `trackBy` option.
+ * `trackBy` takes a function which has two arguments: `index` and `item`.
+ * If `trackBy` is given, Angular tracks changes by the return value of the function.
*
- * A `ControlArray` aggregates the values of each {@link Control} in the group.
- * The status of a `ControlArray` depends on the status of its children.
- * If one of the controls in a group is invalid, the entire array is invalid.
- * Similarly, if a control changes its value, the entire array changes as well.
+ * ### Syntax
*
- * `ControlArray` is one of the three fundamental building blocks used to define forms in Angular,
- * along with {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
- * other controls, but is of fixed length.
+ * - `
...
`
+ * - `
...
`
*
- * ## Adding or removing controls
+ * With `` element:
*
- * To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
- * in `ControlArray` itself. These methods ensure the controls are properly tracked in the
- * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
- * the `ControlArray` directly, as that will result in strange and unexpected behavior such
- * as broken change detection.
+ * ```
+ *
+ *
...
+ *
+ * ```
*
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
+ * ### Example
*
- * @experimental
+ * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
+ * example.
+ *
+ * @stable
*/
- var ControlArray = (function (_super) {
- __extends(ControlArray, _super);
- function ControlArray(controls, validator, asyncValidator) {
- if (validator === void 0) { validator = null; }
- if (asyncValidator === void 0) { asyncValidator = null; }
- _super.call(this, validator, asyncValidator);
- this.controls = controls;
- this._initObservables();
- this._setParentForControls();
- this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+ var NgFor = (function () {
+ function NgFor(_viewContainer, _templateRef, _iterableDiffers, _cdr) {
+ this._viewContainer = _viewContainer;
+ this._templateRef = _templateRef;
+ this._iterableDiffers = _iterableDiffers;
+ this._cdr = _cdr;
}
- /**
- * Get the {@link AbstractControl} at the given `index` in the array.
- */
- ControlArray.prototype.at = function (index) { return this.controls[index]; };
- /**
- * Insert a new {@link AbstractControl} at the end of the array.
- */
- ControlArray.prototype.push = function (control) {
- this.controls.push(control);
- control.setParent(this);
- this.updateValueAndValidity();
- };
- /**
- * Insert a new {@link AbstractControl} at the given `index` in the array.
- */
- ControlArray.prototype.insert = function (index, control) {
- ListWrapper.insert(this.controls, index, control);
- control.setParent(this);
- this.updateValueAndValidity();
- };
- /**
- * Remove the control at the given `index` in the array.
- */
- ControlArray.prototype.removeAt = function (index) {
- ListWrapper.removeAt(this.controls, index);
- this.updateValueAndValidity();
- };
- Object.defineProperty(ControlArray.prototype, "length", {
- /**
- * Length of the control array.
- */
- get: function () { return this.controls.length; },
+ Object.defineProperty(NgFor.prototype, "ngForTemplate", {
+ set: function (value) {
+ if (isPresent(value)) {
+ this._templateRef = value;
+ }
+ },
enumerable: true,
configurable: true
});
- /** @internal */
- ControlArray.prototype._updateValue = function () { this._value = this.controls.map(function (control) { return control.value; }); };
- /** @internal */
- ControlArray.prototype._anyControlsHaveStatus = function (status) {
- return this.controls.some(function (c) { return c.status == status; });
- };
- /** @internal */
- ControlArray.prototype._setParentForControls = function () {
- var _this = this;
- this.controls.forEach(function (control) { control.setParent(_this); });
- };
- return ControlArray;
- }(AbstractControl));
- var formDirectiveProvider = {
- provide: ControlContainer,
- useExisting: _angular_core.forwardRef(function () { return NgForm; })
- };
- var _formWarningDisplayed = false;
- var resolvedPromise = Promise.resolve(null);
- var NgForm = (function (_super) {
- __extends(NgForm, _super);
- function NgForm(validators, asyncValidators) {
- _super.call(this);
- this._submitted = false;
- this.ngSubmit = new EventEmitter$1();
- this._displayWarning();
- this.form = new ControlGroup({}, null, composeValidators(validators), composeAsyncValidators(asyncValidators));
- }
- NgForm.prototype._displayWarning = function () {
- // TODO(kara): Update this when the new forms module becomes the default
- if (!_formWarningDisplayed) {
- _formWarningDisplayed = true;
- console.warn("\n *It looks like you're using the old forms module. This will be opt-in in the next RC, and\n will eventually be removed in favor of the new forms module. For more information, see:\n https://docs.google.com/document/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/preview\n ");
+ NgFor.prototype.ngOnChanges = function (changes) {
+ if ('ngForOf' in changes) {
+ // React on ngForOf changes only once all inputs have been initialized
+ var value = changes['ngForOf'].currentValue;
+ if (isBlank(this._differ) && isPresent(value)) {
+ try {
+ this._differ = this._iterableDiffers.find(value).create(this._cdr, this.ngForTrackBy);
+ }
+ catch (e) {
+ throw new Error("Cannot find a differ supporting object '" + value + "' of type '" + getTypeNameForDebugging(value) + "'. NgFor only supports binding to Iterables such as Arrays.");
+ }
+ }
}
};
- Object.defineProperty(NgForm.prototype, "submitted", {
- get: function () { return this._submitted; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgForm.prototype, "formDirective", {
- get: function () { return this; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgForm.prototype, "control", {
- get: function () { return this.form; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgForm.prototype, "path", {
- get: function () { return []; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgForm.prototype, "controls", {
- get: function () { return this.form.controls; },
- enumerable: true,
- configurable: true
- });
- NgForm.prototype.addControl = function (dir) {
- var _this = this;
- resolvedPromise.then(function () {
- var container = _this._findContainer(dir.path);
- var ctrl = new Control();
- setUpControl(ctrl, dir);
- container.registerControl(dir.name, ctrl);
- ctrl.updateValueAndValidity({ emitEvent: false });
- });
+ NgFor.prototype.ngDoCheck = function () {
+ if (isPresent(this._differ)) {
+ var changes = this._differ.diff(this.ngForOf);
+ if (isPresent(changes))
+ this._applyChanges(changes);
+ }
};
- NgForm.prototype.getControl = function (dir) { return this.form.find(dir.path); };
- NgForm.prototype.removeControl = function (dir) {
+ NgFor.prototype._applyChanges = function (changes) {
var _this = this;
- resolvedPromise.then(function () {
- var container = _this._findContainer(dir.path);
- if (isPresent(container)) {
- container.removeControl(dir.name);
+ var insertTuples = [];
+ changes.forEachOperation(function (item, adjustedPreviousIndex, currentIndex) {
+ if (item.previousIndex == null) {
+ var view = _this._viewContainer.createEmbeddedView(_this._templateRef, new NgForRow(null, null, null), currentIndex);
+ var tuple = new RecordViewTuple(item, view);
+ insertTuples.push(tuple);
}
- });
- };
- NgForm.prototype.addControlGroup = function (dir) {
- var _this = this;
- resolvedPromise.then(function () {
- var container = _this._findContainer(dir.path);
- var group = new ControlGroup({});
- setUpControlGroup(group, dir);
- container.registerControl(dir.name, group);
- group.updateValueAndValidity({ emitEvent: false });
- });
- };
- NgForm.prototype.removeControlGroup = function (dir) {
- var _this = this;
- resolvedPromise.then(function () {
- var container = _this._findContainer(dir.path);
- if (isPresent(container)) {
- container.removeControl(dir.name);
+ else if (currentIndex == null) {
+ _this._viewContainer.remove(adjustedPreviousIndex);
+ }
+ else {
+ var view = _this._viewContainer.get(adjustedPreviousIndex);
+ _this._viewContainer.move(view, currentIndex);
+ var tuple = new RecordViewTuple(item, view);
+ insertTuples.push(tuple);
}
});
- };
- NgForm.prototype.getControlGroup = function (dir) {
- return this.form.find(dir.path);
- };
- NgForm.prototype.updateModel = function (dir, value) {
- var _this = this;
- resolvedPromise.then(function () {
- var ctrl = _this.form.find(dir.path);
- ctrl.updateValue(value);
+ for (var i = 0; i < insertTuples.length; i++) {
+ this._perViewChange(insertTuples[i].view, insertTuples[i].record);
+ }
+ for (var i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+ var viewRef = this._viewContainer.get(i);
+ viewRef.context.index = i;
+ viewRef.context.count = ilen;
+ }
+ changes.forEachIdentityChange(function (record) {
+ var viewRef = _this._viewContainer.get(record.currentIndex);
+ viewRef.context.$implicit = record.item;
});
};
- NgForm.prototype.onSubmit = function () {
- this._submitted = true;
- this.ngSubmit.emit(null);
- return false;
+ NgFor.prototype._perViewChange = function (view, record) {
+ view.context.$implicit = record.item;
};
- /** @internal */
- NgForm.prototype._findContainer = function (path) {
- path.pop();
- return ListWrapper.isEmpty(path) ? this.form : this.form.find(path);
+ NgFor.decorators = [
+ { type: _angular_core.Directive, args: [{ selector: '[ngFor][ngForOf]' },] },
+ ];
+ /** @nocollapse */
+ NgFor.ctorParameters = [
+ { type: _angular_core.ViewContainerRef, },
+ { type: _angular_core.TemplateRef, },
+ { type: _angular_core.IterableDiffers, },
+ { type: _angular_core.ChangeDetectorRef, },
+ ];
+ NgFor.propDecorators = {
+ 'ngForOf': [{ type: _angular_core.Input },],
+ 'ngForTrackBy': [{ type: _angular_core.Input },],
+ 'ngForTemplate': [{ type: _angular_core.Input },],
};
- return NgForm;
- }(ControlContainer));
- /** @nocollapse */
- NgForm.decorators = [
- { type: _angular_core.Directive, args: [{
- selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
- providers: [formDirectiveProvider],
- host: {
- '(submit)': 'onSubmit()',
- },
- outputs: ['ngSubmit'],
- exportAs: 'ngForm'
- },] },
- ];
- /** @nocollapse */
- NgForm.ctorParameters = [
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_VALIDATORS,] },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_ASYNC_VALIDATORS,] },] },
- ];
- var formControlBinding = {
- provide: NgControl,
- useExisting: _angular_core.forwardRef(function () { return NgFormControl; })
- };
- var NgFormControl = (function (_super) {
- __extends(NgFormControl, _super);
- function NgFormControl(_validators, _asyncValidators, valueAccessors) {
- _super.call(this);
- this._validators = _validators;
- this._asyncValidators = _asyncValidators;
- this.update = new EventEmitter$1();
- this.valueAccessor = selectValueAccessor(this, valueAccessors);
+ return NgFor;
+ }());
+ var RecordViewTuple = (function () {
+ function RecordViewTuple(record, view) {
+ this.record = record;
+ this.view = view;
}
- NgFormControl.prototype.ngOnChanges = function (changes) {
- if (this._isControlChanged(changes)) {
- setUpControl(this.form, this);
- this.form.updateValueAndValidity({ emitEvent: false });
- }
- if (isPropertyUpdated(changes, this.viewModel)) {
- this.form.updateValue(this.model);
- this.viewModel = this.model;
- }
- };
- Object.defineProperty(NgFormControl.prototype, "path", {
- get: function () { return []; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgFormControl.prototype, "validator", {
- get: function () { return composeValidators(this._validators); },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgFormControl.prototype, "asyncValidator", {
- get: function () {
- return composeAsyncValidators(this._asyncValidators);
+ return RecordViewTuple;
+ }());
+
+ /**
+ * Removes or recreates a portion of the DOM tree based on an {expression}.
+ *
+ * If the expression assigned to `ngIf` evaluates to a false value then the element
+ * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
+ *
+ * ```
+ *
+ *
+ * {{errorCount}} errors detected
+ *
+ * ```
+ *
+ * ### Syntax
+ *
+ * - `
...
`
+ * - `
...
`
+ * - `
...
`
+ *
+ * @stable
+ */
+ var NgIf = (function () {
+ function NgIf(_viewContainer, _templateRef) {
+ this._viewContainer = _viewContainer;
+ this._templateRef = _templateRef;
+ this._prevCondition = null;
+ }
+ Object.defineProperty(NgIf.prototype, "ngIf", {
+ set: function (newCondition) {
+ if (newCondition && (isBlank(this._prevCondition) || !this._prevCondition)) {
+ this._prevCondition = true;
+ this._viewContainer.createEmbeddedView(this._templateRef);
+ }
+ else if (!newCondition && (isBlank(this._prevCondition) || this._prevCondition)) {
+ this._prevCondition = false;
+ this._viewContainer.clear();
+ }
},
enumerable: true,
configurable: true
});
- Object.defineProperty(NgFormControl.prototype, "control", {
- get: function () { return this.form; },
- enumerable: true,
- configurable: true
- });
- NgFormControl.prototype.viewToModelUpdate = function (newValue) {
- this.viewModel = newValue;
- this.update.emit(newValue);
- };
- NgFormControl.prototype._isControlChanged = function (changes) {
- return StringMapWrapper.contains(changes, 'form');
+ NgIf.decorators = [
+ { type: _angular_core.Directive, args: [{ selector: '[ngIf]' },] },
+ ];
+ /** @nocollapse */
+ NgIf.ctorParameters = [
+ { type: _angular_core.ViewContainerRef, },
+ { type: _angular_core.TemplateRef, },
+ ];
+ NgIf.propDecorators = {
+ 'ngIf': [{ type: _angular_core.Input },],
};
- return NgFormControl;
- }(NgControl));
- /** @nocollapse */
- NgFormControl.decorators = [
- { type: _angular_core.Directive, args: [{
- selector: '[ngFormControl]',
- providers: [formControlBinding],
- inputs: ['form: ngFormControl', 'model: ngModel'],
- outputs: ['update: ngModelChange'],
- exportAs: 'ngForm'
- },] },
- ];
- /** @nocollapse */
- NgFormControl.ctorParameters = [
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_VALIDATORS,] },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_ASYNC_VALIDATORS,] },] },
- { type: Array, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Self }, { type: _angular_core.Inject, args: [NG_VALUE_ACCESSOR,] },] },
- ];
- var formDirectiveProvider$1 = {
- provide: ControlContainer,
- useExisting: _angular_core.forwardRef(function () { return NgFormModel; })
- };
- var _formModelWarningDisplayed = false;
- var NgFormModel = (function (_super) {
- __extends(NgFormModel, _super);
- function NgFormModel(_validators, _asyncValidators) {
- _super.call(this);
- this._validators = _validators;
- this._asyncValidators = _asyncValidators;
- this._submitted = false;
- this.form = null;
- this.directives = [];
- this.ngSubmit = new EventEmitter$1();
- this._displayWarning();
+ return NgIf;
+ }());
+
+ var _CASE_DEFAULT = new Object();
+ var SwitchView = (function () {
+ function SwitchView(_viewContainerRef, _templateRef) {
+ this._viewContainerRef = _viewContainerRef;
+ this._templateRef = _templateRef;
}
- NgFormModel.prototype._displayWarning = function () {
- // TODO(kara): Update this when the new forms module becomes the default
- if (!_formModelWarningDisplayed) {
- _formModelWarningDisplayed = true;
- console.warn("\n *It looks like you're using the old forms module. This will be opt-in in the next RC, and\n will eventually be removed in favor of the new forms module. For more information, see:\n https://docs.google.com/document/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/preview\n ");
- }
- };
- NgFormModel.prototype.ngOnChanges = function (changes) {
- this._checkFormPresent();
- if (StringMapWrapper.contains(changes, 'form')) {
- var sync = composeValidators(this._validators);
- this.form.validator = Validators.compose([this.form.validator, sync]);
- var async = composeAsyncValidators(this._asyncValidators);
- this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
- this.form.updateValueAndValidity({ onlySelf: true, emitEvent: false });
- }
- this._updateDomValue();
- };
- Object.defineProperty(NgFormModel.prototype, "submitted", {
- get: function () { return this._submitted; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgFormModel.prototype, "formDirective", {
- get: function () { return this; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgFormModel.prototype, "control", {
- get: function () { return this.form; },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(NgFormModel.prototype, "path", {
- get: function () { return []; },
+ SwitchView.prototype.create = function () { this._viewContainerRef.createEmbeddedView(this._templateRef); };
+ SwitchView.prototype.destroy = function () { this._viewContainerRef.clear(); };
+ return SwitchView;
+ }());
+ /**
+ * Adds or removes DOM sub-trees when their match expressions match the switch expression.
+ *
+ * Elements within `NgSwitch` but without `NgSwitchCase` or `NgSwitchDefault` directives will be
+ * preserved at the location as specified in the template.
+ *
+ * `NgSwitch` simply inserts nested elements based on which match expression matches the value
+ * obtained from the evaluated switch expression. In other words, you define a container element
+ * (where you place the directive with a switch expression on the
+ * `[ngSwitch]="..."` attribute), define any inner elements inside of the directive and
+ * place a `[ngSwitchCase]` attribute per element.
+ *
+ * The `ngSwitchCase` property is used to inform `NgSwitch` which element to display when the
+ * expression is evaluated. If a matching expression is not found via a `ngSwitchCase` property
+ * then an element with the `ngSwitchDefault` attribute is displayed.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
+ *
+ * ```typescript
+ * @Component({
+ * selector: 'app',
+ * template: `
+ *
Value = {{value}}
+ *
+ *
+ *
+ *
increment to start
+ *
0, increment again
+ *
1, increment again
+ *
2, stop incrementing
+ *
> 2, STOP!
+ *
+ *
+ *
+ *
+ *
+ * increment to start
+ * 0, increment again
+ * 1, increment again
+ * 2, stop incrementing
+ * > 2, STOP!
+ *
+ * `,
+ * directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
+ * })
+ * export class App {
+ * value = 'init';
+ *
+ * inc() {
+ * this.value = this.value === 'init' ? 0 : this.value + 1;
+ * }
+ * }
+ * ```
+ *
+ * @stable
+ */
+ var NgSwitch = (function () {
+ function NgSwitch() {
+ this._useDefault = false;
+ this._valueViews = new Map();
+ this._activeViews = [];
+ }
+ Object.defineProperty(NgSwitch.prototype, "ngSwitch", {
+ set: function (value) {
+ // Empty the currently active ViewContainers
+ this._emptyAllActiveViews();
+ // Add the ViewContainers matching the value (with a fallback to default)
+ this._useDefault = false;
+ var views = this._valueViews.get(value);
+ if (isBlank(views)) {
+ this._useDefault = true;
+ views = normalizeBlank(this._valueViews.get(_CASE_DEFAULT));
+ }
+ this._activateViews(views);
+ this._switchValue = value;
+ },
enumerable: true,
configurable: true
});
- NgFormModel.prototype.addControl = function (dir) {
- var ctrl = this.form.find(dir.path);
- setUpControl(ctrl, dir);
- ctrl.updateValueAndValidity({ emitEvent: false });
- this.directives.push(dir);
- };
- NgFormModel.prototype.getControl = function (dir) { return this.form.find(dir.path); };
- NgFormModel.prototype.removeControl = function (dir) { ListWrapper.remove(this.directives, dir); };
- NgFormModel.prototype.addControlGroup = function (dir) {
- var ctrl = this.form.find(dir.path);
- setUpControlGroup(ctrl, dir);
- ctrl.updateValueAndValidity({ emitEvent: false });
- };
- NgFormModel.prototype.removeControlGroup = function (dir) { };
- NgFormModel.prototype.getControlGroup = function (dir) {
- return this.form.find(dir.path);
- };
- NgFormModel.prototype.updateModel = function (dir, value) {
- var ctrl = this.form.find(dir.path);
- ctrl.updateValue(value);
+ /** @internal */
+ NgSwitch.prototype._onCaseValueChanged = function (oldCase, newCase, view) {
+ this._deregisterView(oldCase, view);
+ this._registerView(newCase, view);
+ if (oldCase === this._switchValue) {
+ view.destroy();
+ ListWrapper.remove(this._activeViews, view);
+ }
+ else if (newCase === this._switchValue) {
+ if (this._useDefault) {
+ this._useDefault = false;
+ this._emptyAllActiveViews();
+ }
+ view.create();
+ this._activeViews.push(view);
+ }
+ // Switch to default when there is no more active ViewContainers
+ if (this._activeViews.length === 0 && !this._useDefault) {
+ this._useDefault = true;
+ this._activateViews(this._valueViews.get(_CASE_DEFAULT));
+ }
};
- NgFormModel.prototype.onSubmit = function () {
- this._submitted = true;
- this.ngSubmit.emit(null);
- return false;
+ /** @internal */
+ NgSwitch.prototype._emptyAllActiveViews = function () {
+ var activeContainers = this._activeViews;
+ for (var i = 0; i < activeContainers.length; i++) {
+ activeContainers[i].destroy();
+ }
+ this._activeViews = [];
};
/** @internal */
- NgFormModel.prototype._updateDomValue = function () {
- var _this = this;
- this.directives.forEach(function (dir) {
- var ctrl = _this.form.find(dir.path);
- dir.valueAccessor.writeValue(ctrl.value);
- });
+ NgSwitch.prototype._activateViews = function (views) {
+ // TODO(vicb): assert(this._activeViews.length === 0);
+ if (isPresent(views)) {
+ for (var i = 0; i < views.length; i++) {
+ views[i].create();
+ }
+ this._activeViews = views;
+ }
};
- NgFormModel.prototype._checkFormPresent = function () {
- if (isBlank(this.form)) {
- throw new BaseException("ngFormModel expects a form. Please pass one in. Example: