CODEWITHSUNDEEP
angulartypescriptextending-classes
Carlton
Carlton

Reputation: 838

Angular 2 inject all Inputs and Outputs into extended component

I am needing a way to automatically inject Inputs and Outputs into a wrapped component.

The setup is a SimpleComponent which has a number of Inputs and Outputs. I want to wrap this element in another element and this has been achieved by creating an ExtendedComponent which extends SimpleComponent.

This ExtendedComponent has all the Inputs and Outputs of SimpleComponent and I want a means to automatically inject these Inputs and Outputs into the template.

Simplified code snippets have been provided below to illustrate the issue.

app.component.html

<app-extended-component [sampleInput1]="4" [sampleInput2]="'sample string'" (sampleOutput)="handleEvent()"></app-extended-component>

simple.component.ts

@Component({
    selector: 'app-simple-component',
    templateUrl: './simple.component.html',
})
export class SimpleComponent  {

    @Input() sampleInput1: number;
    @Input() sampleInput2: string;

    @Output() sampleOutput = new EventEmitter();

    constructor() {
    }

    onClick() {
        this.sampleOutput.emit();
    }
}

simple.component.html

<div class="wrapper" (click)="onClick()">
    {{sampleInput1}}
    {{sampleInput2}}
</div>

extended.component.ts

@Component({
    selector: 'app-extended-component',
    templateUrl: './extended.component.html',
})
export class ExtendedComponent extends SimpleComponent {

    constructor() {
        super();
    }
}

extended.component.html

// Need a way to automatically inject all inputs and outputs into this component
<app-simple-component></app-simple-component>

// It can be done manually like below, but this is not the intended solution
<app-simple-component [sampleInput1]="sampleInput1" [sampleInput2]="sampleInput2"></app-simple-component>

Upvotes: 3

Views: 704

Answers (1)

Swarovski
Swarovski

Reputation: 591

I was looking for the same issue, and I found your post without answer.

It's not work with version < 2.3.0-rc.0 If you want to use it, you have to put your @Input in the child component or to upgrade your angular version.

But I hope that since you posted this message you found the solution :)

Upvotes: 1

Related Questions