2

How do I move all the Inputs and Outputs of a Parent Component into Typescript, rather than HTML?

I have the following with a long list of parameters in Parent, sending and receiving data from Child Component. Would like them to be in Typescript. How can this be transferred? 

<app-address-type-dropdown class="addresstype" (addressTypeChange)="addressTypeChangeEvent($event)"
    [addressTypeDefaultItem]="addressEntryConfig.addressTypeDefaultValue"
    [selectedAddressType]="addressEntryConfig.selectedAddressType"
    [valuesToExclude]="addressEntryConfig.addressTypeDropdownListExclusion">
</app-address-type-dropdown>

Goal:

<app-address-type-dropdown> </app-address-type-dropdown>
<!-- With input and output parameters in the Typescript file -->
  • The purpose is to make it easier for person to rearrange html/css to any liking, without worrying about copying inputs/outputs.

If utilizing services, will that leave with strongly typed components, where parent and child are too connected? Prefer smart-dumb architecture strategy, if that is possible with services or not.

Improve this question
3
  • I think you can't! you can use other techniques to share the data between components. Commented Jan 1, 2020 at 4:34
  • If you move the Inputs and Outputs in the parent component code, would you consider that the components are less tightly coupled than by using a service? Commented Jan 1, 2020 at 5:03
  • @ConnorsFan never thought about it that, good point, guess my purpose is to have people reutilized the html in different formats iwth css, without having to copy all the inputs and outputs repetitively, good point Commented Jan 1, 2020 at 5:06

3 Answers 3

Reset to default
2

You can get a reference to the child component with @ViewChild and set the input properties and subscribe to the events in the parent component code:

@ViewChild(AddressTypeDropdownComponent, { static: false }) child: AddressTypeDropdownComponent;

ngAfterViewInit() {
  // Subscribe to the child component event
  this.child.addressTypeChange.subscribe(value => {
    console.log(value);
  });
}

someMethod() {
  // Set the input values of the child component
  this.child.addressTypeDefaultItem = someValue1;
  this.child.selectedAddressType = someValue2;
}

See this stackblitz for a demo.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is very interesting! is viewchild a good practice in Angular? Also surprised more people don't do this, it essentially moves all the input/output parameters into typescript, seems to be better than muddling it with html, why wouldn't anyone use your answer, rather than mixing things in html?
Please note this answer will work, just with certain differences and limitations, as with anything. stackoverflow.com/questions/59550562/…
0

@Input - Use shared service to receive data in the child.

@Output - Use subjects to listen for the changes in the child component.

Improve this answer

1 Comment

well that leaves me tightly coupled components, any way to do smart -dumb architecture, so things aren't so strongly tied?
0

You can do this with service. In the service you can create a Subject or Behaviorsubject. So if in parent you are emitting some new data the same you can get in child by subscribing that Subject.

Improve this answer

1 Comment

see question requirements, trying to utilize smart-dumb architecture, thanks, hopefully it is addressed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.