74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
|
(function(app) {
|
||
|
|
|
||
|
|
var ActiveLabelComponent = ng.core.Component({
|
||
|
|
selector: 'active-label',
|
||
|
|
template: '<span class="active-label"' +
|
||
|
|
'*ngIf="active">' +
|
||
|
|
'Active' +
|
||
|
|
'</span>'
|
||
|
|
}).Class({
|
||
|
|
constructor: function() { },
|
||
|
|
activate: function() {
|
||
|
|
this.active = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// #docregion content
|
||
|
|
var HeroComponent = ng.core.Component({
|
||
|
|
selector: 'hero',
|
||
|
|
template: '<h2 [class.active]=active>' +
|
||
|
|
'{{hero.name}} ' +
|
||
|
|
'<ng-content></ng-content>' +
|
||
|
|
'</h2>',
|
||
|
|
inputs: ['hero'],
|
||
|
|
queries: {
|
||
|
|
label: new ng.core.ContentChild(
|
||
|
|
ActiveLabelComponent)
|
||
|
|
}
|
||
|
|
}).Class({
|
||
|
|
constructor: function() { },
|
||
|
|
activate: function() {
|
||
|
|
this.active = true;
|
||
|
|
this.label.activate();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// #enddocregion content
|
||
|
|
|
||
|
|
// #docregion view
|
||
|
|
var AppComponent = ng.core.Component({
|
||
|
|
selector: 'heroes-queries',
|
||
|
|
template:
|
||
|
|
'<hero *ngFor="#hero of heroData"' +
|
||
|
|
'[hero]="hero">' +
|
||
|
|
'<active-label></active-label>' +
|
||
|
|
'</hero>' +
|
||
|
|
'<button (click)="activate()">' +
|
||
|
|
'Activate' +
|
||
|
|
'</button>',
|
||
|
|
directives: [
|
||
|
|
HeroComponent,
|
||
|
|
ActiveLabelComponent
|
||
|
|
],
|
||
|
|
queries: {
|
||
|
|
heroCmps: new ng.core.ViewChildren(
|
||
|
|
HeroComponent)
|
||
|
|
}
|
||
|
|
}).Class({
|
||
|
|
constructor: function() {
|
||
|
|
this.heroData = [
|
||
|
|
{id: 1, name: 'Windstorm'},
|
||
|
|
{id: 2, name: 'Superman'}
|
||
|
|
];
|
||
|
|
},
|
||
|
|
activate: function() {
|
||
|
|
this.heroCmps.forEach(function(cmp) {
|
||
|
|
cmp.activate();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// #enddocregion view
|
||
|
|
|
||
|
|
app.HeroesQueriesComponent = AppComponent;
|
||
|
|
|
||
|
|
})(window.app = window.app || {});
|