Coming from a React background, you can abstract out a library component in your app by renaming it like this:
const MyAppTable = (props) => <LibraryTable ...props />;
I want to do something similar in Angular, but am not sure how to get the 1:1 mapping of the component's behaviors. E.g., I want to do this:
<my-app-table [input]="input" ></my-app-table>
is the same as
<library-table [input]="input" ></library-table> (plus all additional behavior found in component)
Isn't functional programming great?
You have to go the object oriented way with Angular. You can extend a component class and just update the component metadata that you want to change.
@Component({selector: 'my-app-table'})
export class MyAppTableComponent extends LibraryTableComponent {
constructor() {
super()
}
}
You will have to match the constructor arguments of the base class. Otherwise Angular doesn't know what the dependency injections are.
This is a bit of an anti-pattern in object oriented programming. If the base class is updated to a new version this might break the functionality unless you update the derived classes.
So the preferred approach is called encapsulation. Which basically means to wrap around the other component, but there is nothing easy about that.
@Component({
selector: 'my-app-table',
template: `<library-table [input]="input"></library-table>`
})
export class MyAppTableComponent {
@Input() input: any;
}
The above requires more work but is safer from a code point of view.
