Is it possible to extend an Angular component and then use the base component in an ngFor loop?

Question

Is it possible to extend an Angular component and then use the base component in an ngFor loop?

Can Angular components be extended? And if so, is it possible to create a list of diverse components (using an ngFor loop) that all extend a common base component?

For instance, could a custom menu bar display various types of menu items, such as dropdown menus, buttons, text boxes, etc., all extending the same "CustomMenuItem" component with shared functionality?

@Component({
    selector: 'custom-menu-bar',
    inputs: ['customMenuItems'],
    outputs: ['onMenuEvent'],
    template: `
        <div class="row">
            <custom-menu-item *ngFor="#item of customMenuItems">
                ...
            </custom-menu-item>
        </div>
    `
})
export class CustomMenuBar {
    customMenuItems: CustomMenuItem[];
    onMenuEvent: EventEmitter<MenuEvent>;

    //...
}

angularjs angular inheritance typescript ngfor

Answer 1

Answer №1

Angular 2.3 introduced Component Inheritance. Take a look at this sample code snippet (excerpted from an informative blog post):

@Component({
  selector: 'person',
  template: `<h4>Person: {{name}}</h4>`
})
export class Person {
  @Input() name: string;
}

@Component({
  selector: 'employee',
  template: `<h4>Employee: {{name}}, id: {{id}}</h4>`
})
export class Employee extends Person {
  @Input() id: string;
}

<div>
  <person name="John"></person>
  <employee name="Tom" id="45231"></employee>

Answer 2

Angular 2.3 introduced Component Inheritance. Take a look at this sample code snippet (excerpted from an informative blog post):

@Component({
  selector: 'person',
  template: `<h4>Person: {{name}}</h4>`
})
export class Person {
  @Input() name: string;
}

@Component({
  selector: 'employee',
  template: `<h4>Employee: {{name}}, id: {{id}}</h4>`
})
export class Employee extends Person {
  @Input() id: string;
}

<div>
  <person name="John"></person>
  <employee name="Tom" id="45231"></employee>

Answer 3

Answer №2

If you're using Angular 2, DynamicComponentLoader can help you achieve this functionality. Check out the official documentation for more information.

Here is a code snippet from the documentation showcasing how to use DynamicComponentLoader:

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<div #child></div>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child');
  }
}
bootstrap(MyApp);

Answer 4

If you're using Angular 2, DynamicComponentLoader can help you achieve this functionality. Check out the official documentation for more information.

Here is a code snippet from the documentation showcasing how to use DynamicComponentLoader:

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<div #child></div>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child');
  }
}
bootstrap(MyApp);

Is it possible to extend an Angular component and then use the base component in an ngFor loop?

Answer №1

Answer №2

Similar questions

I'm running into issues transferring data between Angular and an API

Module import in Ionic

Declaring a function type with a void parameter type in typescript

Error: In Angular and Typescript, the function this.$resource is not recognized

Incorporating Firebase administrator into an Angular 4 project

Experience the latest happenings in SAP Spartacus 4.0 by signing up for updates directly from

What is the best way to invoke a method from a class in Angular testing when the class has a Router constructor?

Managing a scenario with a union type where the value can be retrieved from one of two different functions

Send a request to templateUrl

AngularJS using the ng-controller directive

Guide on adding a button to a mat-table in Angular

Managing numerous subscriptions to private subjects that are revealed by utilizing the asObservable() method

Unable to access a function from a different controller within an AngularJS Ionic framework application

Modifying Characteristics of Elements Added Dynamically

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Utilizing cross-platform configurations and functions across frontend and backend systems, such as integrating AngularJS with Django

Leveraging CDK Context Variables in C# Lambda Initialization Code

Encountering a glitch with ng2-pdf-viewer on Angular version 13.2.2 and Ionic version 6

The function is producing inaccurate results when it is requested from a Flask app route

Using AngularJS `$state.go` to navigate without redirection in ExpressJS