fierce smelt
So I keep seeing examples like these in the official Angular docs, that have to do with parent and child components, seemingly within the same template…
Two Way Binding
AppComponent
app.component.ts
fontsize: number = 16;
app.component.html
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
SizerComponent
sizer.component.ts
export class SizerComponent {
@Input() size!: number | string;
@Output() sizeChange = new EventEmitter<number>();
adjust(value: number) {
this.size = value;
this.sizeChange.emit(this.size);
}
}
sizer.component.html
<button type="button" (click)="adjust(-1)" title="smaller">-</button>
<button type="button" (click)="adjust(1)" title="bigger">+</button>
<span>FontSize: {{size}}px</span>
Which all starts off with even worse in earlier tutorials, setting this precedent off the bat…
Consider the following hierarchy:
<parent-component>
<child-component></child-component>
</parent-component>
AppComponent
app.component.ts
export class AppComponent {
items = ['Television', 'Bowling Ball', 'Teddy Bear', 'Toaster'];
addItem(newItem: string) {
this.items.push(newItem);
}
}
app.component.html
<app-item-detail [item]="items[0]"></app-item-detail>
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
<ng-template *ngIf=“items.length > 1”>
<p>All Items</p>
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
</ng-template>
ItemDetailComponent
item-detail.component.ts
export class ItemDetailComponent {
@Input() item: string = “”;
}
item-detail.component.html
<p>Today's item: {{item}}</p>
ItemOutputComponent
item-output.component.ts
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}
item-output.component.html
<p>Add another item to list for later</p>
<label for="item-input">Additional item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to list</button>
Here’s my problem however
If you refer back to the “consider the following hierarchy part”, my app looks like that, but at the same time also doesn’t actually look like that at all…
My app, to be precise, looks like this
<body>
<app-component>
<router-outlet></router-outlet>
</app-component>
</body>
Paired with a simple Router, and basic paths configured like this
const routes: Routes = [{
path: 'home',
component: HomeScreenComponent
}, {
path: 'feature',
component: FeatureScreenComponent
}];
So I DO in fact actually need to share data Parent -> Child, and some times vice versa, yet the only way Angular documents doing this is through template syntax and under the presumption that both components appear in the same template, or that at least the child component explicitly appears within the parent template
None of my components are using that pattern, much less even necessarily appearing in ANY component.html files even ONCE, as their dom elements are being written in by the Router, and not by me
❓ So how do I establish these sort of bindings between my AppComponent and ChildComponents when I’m not in control of writing the markup and it’s dynamic like this? Can it even be done?
naive reef
