isolate scope (scope: {}) in modern Angular
Every Angular component is isolated by default. Its template only sees the members of its own class, and data crosses the boundary through inputs and outputs.
Before · AngularJS
app.directive('ratingStars', function () {
return {
restrict: 'E',
scope: { value: '=', max: '@', onRate: '&' },
templateUrl: 'rating-stars.html',
link: function (scope) {
scope.rate = function (n) {
scope.value = n;
scope.onRate({ value: n });
};
}
};
});@Component({
selector: 'app-rating-stars',
templateUrl: './rating-stars.component.html',
})
export class RatingStarsComponent {
value = model(0);
max = input(5, { transform: numberAttribute });
rated = output<number>();
rate(n: number) {
this.value.set(n);
this.rated.emit(n);
}
}What changes
- The scope: { } definition becomes input(), output() and model() fields on the class.
- Directives with scope: false or scope: true, which read the parent scope directly, need an explicit input for each value they used.
- '@' bindings always delivered strings; use numberAttribute or booleanAttribute as the input transform to get real types.
Migration tip. Start with the directives that already have an isolate scope, since they convert almost mechanically. For the ones that share the parent scope, list every property they read before you touch the code.
Related
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn