Is it possible to connect many components to a single class object in Angular 2?

Question

Is it possible to connect many components to a single class object in Angular 2?

I have two separate templates and styles for an input box, however both operate in the same manner and access backend data similarly. I am interested in having both templates access the same functions. Is there a method to associate two components with one class or allow one component to utilize another's functions?

@Component({
    selector: 'inputbox1',
    templateUrl: 'templates/Tnputbox1.html'
})
export class Inputbox1 { 
...
}

An alternative approach would involve creating two classes with duplicate code for each component, or completely rewriting all templates and styles.

typescript angular

Answer 1

Answer №1

If you want to define common functions for multiple classes, you can create an Abstract Class and have other classes extend it:

@Component({
    selector: 'inputbox1',
    templateUrl: 'templates/Tnputbox1.html'
})
export class Inputbox1 extends Inputbox { 
...
}

@Component({
    selector: 'inputbox2',
    templateUrl: 'templates/Tnputbox2.html'
})
export class Inputbox2 extends Inputbox { 
...
}

abstract class Inputbox { 
...your shared functionality goes here
}

Answer 2

If you want to define common functions for multiple classes, you can create an Abstract Class and have other classes extend it:

@Component({
    selector: 'inputbox1',
    templateUrl: 'templates/Tnputbox1.html'
})
export class Inputbox1 extends Inputbox { 
...
}

@Component({
    selector: 'inputbox2',
    templateUrl: 'templates/Tnputbox2.html'
})
export class Inputbox2 extends Inputbox { 
...
}

abstract class Inputbox { 
...your shared functionality goes here
}

Is it possible to connect many components to a single class object in Angular 2?

Answer №1

Similar questions

Transforming a current angular 2 project to incorporate angular CLI

Dealing with time zone offsets in Angular 2 Date Pipe even without a specific offset

Mocking transitive dependencies in Typescript and Node.js for integration testing: A comprehensive guide

Using <md-error> in Angular Material 2: A Comprehensive Guide

When employing `queryParams` in Angular routing, the URL will automatically replace `%` with `%25`

Error shown in console when using Angular 7 FormControlName

What could be causing the subscription in reactive form to not function properly?

Tips for waiting until all data has been loaded within Angular 2's asynchronous http calls

Event vs ViewChild: Understanding the best way for parent components to obtain information from child

Tips for capturing the output of a dynamically rendered component in Angular 8

ionic issue with ion-refresher

Encounter a 404 error message coming from nginx while running ng build

Merging two promises into a single promise in Angular

Eslint is actively monitoring files specified in the eslintignore to ensure they meet the set

Unable to loop through using ngFor

What is the source of the compiler options in tsconfig.json?

Is there a way to invoke a function within a mat-error element?

The JestImportMeta interface is mistakenly extending the ImportMeta interface, causing an error

Tips on adding a generic type to a utility function designed for comparing object values

Encountering an error while unit testing Angular components with MatDialog: "Error: <spyOn>: open has already been spied upon."