Component isolation separates Angular components so one component does not directly share objects with another. The shared-object example exposes the opposite design: a parent creates one DiscountService instance and passes it into both a display component and an editor, allowing edits in one component to affect the other. section 18.2.1
The example makes the coupling visible through these implementation choices:
- DiscountDisplayComponent receives the service through a required input and reads its discount property. section 18.2.1
- DiscountEditorComponent receives the same input and changes discount through two-way ngModel binding. section 18.2.1
- The parent template supplies the same discounter object to both components, so their state is directly connected. section 18.2.1
Listing 18.3. The contents of the discountDisplay.component.ts file in the src/app folder
import { Component, Input } from "@angular/core";
import { DiscountService } from "./discount.service";
@Component({
selector: "paDiscountDisplay",
template: `<div class="bg-info text-white p-2 my-2">
The discount is {{discounter.discount }}
</div>`
})
export class PaDiscountDisplayComponent {
@Input({alias: "discounter", required: true})
discounter!: DiscountService;
}
Inspect the display component’s required input to see how a component accepts the shared DiscountService object. section 18.2.1
