Invoke a function of a child component that resides within the <ng-content> tag of its parent component

Check out the Plunkr to see what I'm working on.

I have a dynamic tab control where each tab contains a component that extends from a 'Delay-load' component. The goal is for the user to click on a tab and then trigger the 'loadData' function within the corresponding component.

I've attempted using @ViewChild or @ContentChild to access the child component, but nothing seems to be effective.

The tab template looks like this:

<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

Is it possible to call the .loadData() method of the component in the element when setting the 'active' property within the tab component?

angulartypescripttransclusion

Answer №1

My solution is to use:

  ngAfterContentInit() {
    if(this.component) {
      this.component.loadData();
    }
  }

  @ContentChild(DelayLoadComponent) component: DelayLoadComponent;

However, the lazy loading of the component does not seem to be working.

Example Link

You may consider implementing an *ngIf statement that dynamically adds the component to the DOM only when the tab is active.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using `new Date(device.timestamp).toLocaleString()` in React with typescript results in an invalid date

The timestamp I am receiving is in unix time format. {devices.map((device, index) => { return ( <tr key={index} className="bg-white border-b "> <td className="py-4 px-6"> {getSensor ...

reactjstypescriptreact-typescript

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge I’m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

Identifying unique properties with specific keys in a Typescript object

Can a specific type be used with one property when using the key in of type? Playground. type ManyProps = 'name' | 'age' | 'height' type MyObj = {[key in ManyProps]: number, name?: string} ...

typescript

Errors in Visual Studio regarding typescript are often not found by tsc and eslint, causing frustration for developers

Today, after restarting my computer and launching visual studio code, I encountered an unfamiliar error that I've never seen before: I haven't made any changes to my project's code (confirmed by running git status). It's unclear whethe ...

typescriptvisual-studio-codeeslint

"Type 'Unknown' cannot be assigned to the specified type: Typescript Error encountered while using

I encountered an error message in my Redux Observable setup. Any advice on how to resolve this issue? The error states: 'Argument of type 'OperatorFunction<ITodo[], Action<{ params: { url: string; }; } & { result: { todos: ITodo[]; }; ...

typescriptreduxredux-observable

Find the calculated values within an Angular Material table

I came across this fantastic example of an Angular Material table with checkboxes that fits perfectly with what I want to implement in my application. However, I am facing a challenge - I need to calculate the total value of the checked rows. Specifically, ...

angulartypescriptangular-material

The VSCode debugger is like a frozen statue, refusing to budge or take

Seeking assistance with configuring debugging for an Angular project using VSCode and Chrome. Despite reviewing numerous guides and tutorials, none of the solutions seem to work. The goal is to make the launch configuration function properly (not the attac ...

angularvisual-studio-code

Challenges arise when working with Vue 3.2 using the <script setup> tag in conjunction with TypeScript type

Hey there! I've been working with the Vue 3.2 <script setup> tag along with TypeScript. In a simple scenario, I'm aiming to display a user ID in the template. Technically, my code is functioning correctly as it shows the user ID as expect ...

typescriptfirebasevue.jsvuejs3vue-composition-api

The HttpPut request code format is malfunctioning, although it is effective for another request

I'm struggling with a HTTPPUT request that just won't get called. Strangely enough, I have a similar put request that works perfectly fine for another tab even though both pages are practically identical. I've exhausted all options and can&a ...

asp.netangulartypescript

Encountered an issue when attempting to post to an ASP.NET Core Web API utilizing Windows authentication

The setup consists of an AspNetCore WebApi using default configuration for Windows authentication and CORS enabled. The client side utilizes Angular with both GET and POST methods implemented. Successfully executing the GET call: this.http.get("https://l ...

angularcorsasp.net-core-webapiwindows-authentication

When using TypeORM, make sure to include the "WHERE IN (...)" clause in the query condition only if there is a value associated with it

In my TypeScript node.js project using TypeORM (v0.2.40), I have a query to find a record in the database based on specific criteria: userRepository.find({ where: { firstName: 'John', company: 'foo' } }); This executes the following SQ ...

node.jstypescripttypeormnode.js-typeormtypeorm-datamapper

Utilizing @ngrx/router-store in a feature module: A comprehensive guide

The NGRX documentation for Router-Store only showcases an example with .forRoot(). Upon experimenting with .forFeature(), I realized that this static method does not exist. I am interested in defining certain actions and effects to be utilized within my f ...

angulartypescriptngrxngrx-router-store

`Angular Image Upload: A Comprehensive Guide`

I'm currently facing a challenge while attempting to upload an image using Angular to a Google storage bucket. Interestingly, everything works perfectly with Postman, but I've hit a roadblock with Angular Typescript. Does anyone have any suggesti ...

javascriptangulartypescripttwitter-bootstrapgoogle-cloud-storage

Allow web applications in Apache ServiceMix to communicate across different domains by enabling Cross

My current project involves deploying an angular2 webapp in servicemix as a war file. As a result, the app runs on the localhost:8181/angular2webapp URL. Additionally, I have a bundle installed for handling REST requests, which essentially functions as a c ...

javaangularhttpapache-camelapache-servicemix

How can we set the initial values of a Child's formgroup in Angular 11?

In the parent HTML file, it is structured like this: <div class="modal-body"> <app-addchild [childform]="element"></app-addchild> </div> The "element" mentioned here refers to the row data in JSON fo ...

angularangular11

Tips for efficiently saving data using await in Mongoose

Currently, the code above is functional, but I am interested in utilizing only async/await for better readability. So, my query is: How can I convert cat.save().then(() => console.log('Saved in db')); to utilize await instead? The purpose of ...

javascriptnode.jstypescriptmongodbmongoose

Issues with Typescript and TypeORM

QueryFailedError: SQLITE_ERROR: near "Jan": syntax error. I am completely baffled by this error message. I have followed the same steps as before, but now it seems to be suggesting that things are moving too slowly or there is some other issue at play. ...

sqltypescriptsqlitesyntaxtypeorm

Storing Bearer Tokens in Angular from Response Headers

After sending a login post request, I received a response. Everything looks good except the fact that the response body is empty and I am unsure how to access (and store locally) the Bearer token. Currently, this is what I can log: https://i.sstatic.net/N ...

angularauthenticationtokenbearer-token

Creating a helper function for initiating and ending loading using Angular2's Observable forkJoin

I have a question regarding the forkjoin method in Angular. My main concern is writing a helper function that can handle multiple observables. This helper function should display a spinner service before subscribing to the observables and then hide the spi ...

angularobservable

Dealing with nullable objects in Typescript: Best practices

Looking for a solution to have a function return an object or null. This is how I am currently addressing it: export interface MyObject { id: string } function test(id) : MyObject | null { if (!id) { return null; } return { ...

typescript