Angular Signals: How to destructure model

I have two Angular (v19) components.

I want to have an instance of ComponentB inside the template of ComponentA. ComponentB.parameters should be bound to the individual fields of ComponentA in such a way that a change to ComponentB.parameters updates the individual fields of ComponentA and an update to any of the fields of ComponentA should update ComponentB.parameters.

How to to this?

a.component.ts

@Component({
selector: 'app-a',
templateUrl: './a.component.html',
standalone: true,
imports: [ComponentB]
})
export class ComponentA {
public readonly filter = model<string>();
public readonly orderby = model<string>();
public readonly skip = model<number>();
public readonly top = model<number>();
}


b.component.ts

@Component({
selector: 'app-b',
standalone: true,
})
export class ComponentB {
public readonly parameters = model<Parameters>()
}


parameters.ts

export interface Parameters {
filter?: string;
orderby?: string;
skip?: string;
top?: string;
}


a.component.html

<app-b [(parameters)]="???"></app-b>

Continue reading...