Equivalent of AngularJS Component require property in Angular Component

Question

I am upgrading a large Angular 1.6 App and we have number of components which use 'require' to get access to parent component's controller. AngularJS component looks like:

 var tileTextbox = {
        template: '<ignore>',
        controller: TileTextboxController,
        bindings: {
            field: '<',
            notifyError: '&',
            context: '<',
            onRemoteFieldAction: '&',
            onChange: '&'
        },
        require: {
            formsCtrl: '^gsForm' ----> What should this be replaced with in Angular component?
        }
    };

I found @ViewChild which gives Parent access to Child but I am looking for other way around. I know we could refactor an use some sort of shared service but at this point I am just looking for minimal refactor. From Angular's documentation @ https://angular.io/guide/upgrade it does look like your component can use 'require' but just don't know how

To add to above, the parent component is AngularJS, this is an Hybrid app with some components being moved to Angular — pateketu, Nov 30 '18 at 10:14

score 1 · Answer 1 · answered Nov 30 '18 at 10:18

1

require equivalent in angular is Host. You can use Host decorator to acquire the parent component instance. For the same you have to mention parent component/directive/service name inside child component consturctor.

constructor(@Host() private gsForm: GsForm) {
   //here you will have access to parent directive gsForm
}

answered Nov 30 '18 at 10:18

Pankaj Parkar

134,766
23
234
299

this didn't really work, I am guessing GSForm is an old AngularJS – pateketu Nov 30 '18 at 12:25
@pateketu are you trying to communicate between AngularJS to Angular?? – Pankaj Parkar Nov 30 '18 at 14:53
Yes, its an Hybrid App, most of the components are in AngularJS and just starting to move component-by-component to Angular – pateketu Nov 30 '18 at 15:15

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

From AngularJS Docs:

Intercomponent Communication

Directives can require the controllers of other directives to enable communication between each other. This can be achieved in a component by providing an object mapping for the require property. The object keys specify the property names under which the required controllers (object values) will be bound to the requiring component's controller.

Essentially this is required to share data between two Components. There are multiple ways of doing that in Angular.

You could create a SharedService and inject it in both the Angular Components. Set data from one component and retrieve data from the other.
You could use @Input properties to pass data from Parent to Child.
You could use @Output properties to pass data from Child to Parent.

There are many other ways of sharing data between parent and child components. ViewChild etc for instance. But the above three are the most straight-forward ways.

using @Input()formsCtrl is plan B, I like @Pankaj-Paker 's approach — pateketu, Nov 30 '18 at 11:43

Equivalent of AngularJS Component require property in Angular Component

2 Answers2