How to refer to a dynamic instance of @ContentChild in Angular 2

Question

How to refer to a dynamic instance of @ContentChild in Angular 2

I am currently working with Angular 2.0.1.

One of my components can accept any other component using <ng-content>, and this functionality is working well.

However, I face a challenge when trying to reference the injected component.

If I knew that only one component would ever be passed through <ng-content>, I could simply declare:

@ContentChild(MyComponent) dynamicTarget: IMyComponent;

. But since it could be any component (with the assumption that each injected component implements a specific interface), things get more complicated.

I also attempted using

<ng-content #dynamicTarget'>

and then referencing it like so:

@ContentChild('dynamicTarget') dynamicTarget: IMyComponent;

, but unfortunately, this returns undefined.

Does anyone have a solution on how I could inform Angular 2 that this element is an instance of a component so that I can proceed to call a function on it?

To provide more context to the scenario - I am developing a multi-step wizard that may contain various components as content, and my objective is to execute the validate function on the content (assuming such a function exists within the respective instances).

angular typescript angular2-ngcontent

Answer 1

Answer №1

One technique could involve assigning the same #id to all dynamic components, such as using #thoseThings (similar to @Missingmanual).

PLUNKER (check the console for matches.)

@Component({
  selector: 'my-app',
  template: `
  <div [style.border]="'4px solid red'">
    I'm (g)Root.

    <child-cmp>
      <another-cmp #thoseThings></another-cmp>
    </child-cmp>
  </div>
  `,
})
export class App {
}


@Component({
  selector: 'child-cmp',
  template: `
    <div [style.border]="'4px solid black'">
        I'm Child.
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildCmp {
  @ContentChildren('thoseThings') thoseThings;

  ngAfterContentInit() {
    console.log(this.thoseThings);

    this.validateAll();

    if(this.thoseThings){
     this.thoseThings.changes.subscribe(() => {
       console.log('new', this.thoseThings);
     }) 
    }
  }

  validateAll() {
    this.thoseThings.forEach((dynCmp: any) => {
      if(dynCmp.validate)
       dynCmp.validate();  // calls validate function if it exists in the component
    });
  }
}


@Component({
  selector: 'another-cmp',
  template: `
    <div [style.border]="'4px solid green'">
        I'm a Stranger, catch me if you can.
    </div>
  `,
})
export class AnOtherCmp {
}

Answer 2

One technique could involve assigning the same #id to all dynamic components, such as using #thoseThings (similar to @Missingmanual).

PLUNKER (check the console for matches.)

@Component({
  selector: 'my-app',
  template: `
  <div [style.border]="'4px solid red'">
    I'm (g)Root.

    <child-cmp>
      <another-cmp #thoseThings></another-cmp>
    </child-cmp>
  </div>
  `,
})
export class App {
}


@Component({
  selector: 'child-cmp',
  template: `
    <div [style.border]="'4px solid black'">
        I'm Child.
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildCmp {
  @ContentChildren('thoseThings') thoseThings;

  ngAfterContentInit() {
    console.log(this.thoseThings);

    this.validateAll();

    if(this.thoseThings){
     this.thoseThings.changes.subscribe(() => {
       console.log('new', this.thoseThings);
     }) 
    }
  }

  validateAll() {
    this.thoseThings.forEach((dynCmp: any) => {
      if(dynCmp.validate)
       dynCmp.validate();  // calls validate function if it exists in the component
    });
  }
}


@Component({
  selector: 'another-cmp',
  template: `
    <div [style.border]="'4px solid green'">
        I'm a Stranger, catch me if you can.
    </div>
  `,
})
export class AnOtherCmp {
}

Answer 3

Answer №2

Utilizing superclass queries was functional in previous versions, as seen here: https://github.com/angular/angular/issues/8580. However, I encountered difficulties implementing it with NgModule.

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Parent, Transcluded1, Transcluded2 ],
  providers: [
    {provide: TranscludedBase, useExisting: Transcluded1, multi:true},
    {provide: TranscludedBase, useExisting: Transcluded2, multi:true}
  ],
  bootstrap: [ App ]
})

Plunker demonstration

You have the option to employ dynamic creation of components, detailed in this post: Angular 2 dynamic tabs with user-click chosen components, which encompasses wizard steps instead of traditional tabs.
Alternatively, you can explicitly pass elements to an input rather than solely projecting them:

See example on Plunker

Answer 4

Utilizing superclass queries was functional in previous versions, as seen here: https://github.com/angular/angular/issues/8580. However, I encountered difficulties implementing it with NgModule.

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Parent, Transcluded1, Transcluded2 ],
  providers: [
    {provide: TranscludedBase, useExisting: Transcluded1, multi:true},
    {provide: TranscludedBase, useExisting: Transcluded2, multi:true}
  ],
  bootstrap: [ App ]
})

Plunker demonstration

You have the option to employ dynamic creation of components, detailed in this post: Angular 2 dynamic tabs with user-click chosen components, which encompasses wizard steps instead of traditional tabs.
Alternatively, you can explicitly pass elements to an input rather than solely projecting them:

See example on Plunker

Answer 5

Answer №3

If every component has a validate function and implements the same interface like IValidate, you can use the following approach:

@ContentChild('IValidate') dynamicTarget: IValidate;
// ...
this.dynamicTarget.validate();

Angular is indifferent to the specific class as long as it adheres to the required interface.

Answer 6

If every component has a validate function and implements the same interface like IValidate, you can use the following approach:

@ContentChild('IValidate') dynamicTarget: IValidate;
// ...
this.dynamicTarget.validate();

Angular is indifferent to the specific class as long as it adheres to the required interface.

How to refer to a dynamic instance of @ContentChild in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Your global Angular CLI version (6.1.2) surpasses that of your local version (1.5.0). Which version of Angular CLI should be used locally?

Encountering issues when attempting to activate npm start command in Ubuntu operating system

Creating a Component with a flexible template: (Using transclusion and an inline template)

I want to establish the identical response output field name in NestJS by utilizing the @Expose decorator from class-transformer

What materials are required in order to receive messages and information through my Contact page?

Guide on integrating an element into a different element in a Vue 3 Tree Viewer

Error: Angular ngFor directive not displaying list item

Encountering issues when attempting to set up graphqlExpress due to type

Encountered an issue while setting up an object variable: Error - 'const' declarations must be initialized.

What is the predetermined time limit for an HTTP GET request made using the HttpClient module in Angular 2?

What are the steps for integrating and expanding a JavaScript library using rollup, TypeScript, and Angular 2?

The error TS2304 in @angular/common is indicating that the name 'unknown' cannot be found

Storing response data as a variable in TypeScript with Angular 2 can be achieved by declaring a variable

Utilizing Angular's mat-slide-toggle along with a numeric input form

Create an interactive and responsive user interface for Object using the Angular framework

The issue of a mocked MobX store in Jest not resetting between tests is causing problems

Issues with mat-input functionality within a mat-table in Angular 8

"Strange Type Conversion Behavior in next.js 13: Why is res.json() Converting Numbers to Strings

Isolated Modules in Angular Version 17 and Beyond

Searching through an array to find or filter items based on multiple conditions

How to refer to a dynamic instance of @ContentChild in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Your global Angular CLI version (6.1.2) surpasses that of your local version (1.5.0). Which version of Angular CLI should be used locally?

Encountering issues when attempting to activate npm start command in Ubuntu operating system

Creating a Component with a flexible template: (Using transclusion and an inline template)

I want to establish the identical response output field name in NestJS by utilizing the @Expose decorator from class-transformer

What materials are required in order to receive messages and information through my Contact page?

Guide on integrating an element into a different element in a Vue 3 Tree Viewer

Error: Angular ngFor directive not displaying list item

Encountering issues when attempting to set up graphqlExpress due to type

Encountered an issue while setting up an object variable: Error - **'const' declarations must be initialized.**

What is the predetermined time limit for an HTTP GET request made using the HttpClient module in Angular 2?

What are the steps for integrating and expanding a JavaScript library using rollup, TypeScript, and Angular 2?

The error TS2304 in @angular/common is indicating that the name 'unknown' cannot be found

Storing response data as a variable in TypeScript with Angular 2 can be achieved by declaring a variable

Utilizing Angular's mat-slide-toggle along with a numeric input form

Create an interactive and responsive user interface for Object using the Angular framework

The issue of a mocked MobX store in Jest not resetting between tests is causing problems

Issues with mat-input functionality within a mat-table in Angular 8

"Strange Type Conversion Behavior in next.js 13: Why is res.json() Converting Numbers to Strings

Isolated Modules in Angular Version 17 and Beyond

Searching through an array to find or filter items based on multiple conditions

Encountered an issue while setting up an object variable: Error - 'const' declarations must be initialized.