220 questions
2
votes
1
answer
49
views
Angular dynamic questions causing infinite re-renders
I am trying to generate dynamic forms based on a set of questions I receive from an API.
When the app inits I will dispatch a state action that will call the mock API to get the questions and then the ...
- 103
0
votes
0
answers
47
views
Tracking when dynamic structure of components is fully rendered in Angular
I have a nested structure of components in form of JSON that I get from an API.
componentStructure$ = apiCall();
The JSON looks like this:
structure = {
component,
innerComponents: [{
...
- 140
1
vote
1
answer
93
views
`this` not set to component instance when creating component programatically
I have a directive that reads src attribute and appends a DynamicComponent. It also sets an input property of DynamicComponent.
@Directive({
selector: '[appDynamic]'
})
export class InjectDirective {...
- 6,138
4
votes
2
answers
445
views
How to use formControlName (ng_value_accessor) with ngComponentOutlet in Angular for dynamic form components
I'm working on a dynamic form in Angular where I need to use ngComponentOutlet to dynamically load different components based on the field type. However, I'm struggling to bind formControlName to ...
- 53
1
vote
1
answer
67
views
Access child component from dynamically created component - Angular 12
Inside global-component I have method for dynamically creating component
const comFactory = this.resolver.resolveComponentFactory(ParentComponent);
const component: any = this.componentContainer....
- 751
1
vote
1
answer
81
views
Is there a way to bind event in dynamically rendered components in angular using templates?
I am using below code to render my components dynamically -
@for(item of list(); track $index){
<!-- dynamic rendering using ng-container -->
<ng-container *ngComponentOutlet=&...
- 961
1
vote
0
answers
73
views
Using Injector.create() to dynamically create injector for embedded view is not working when parent injector is provided via parent property
I want to dynamically create the injector for embeddedView and for that purpose I use Injector.create() method:
const myInjector = Injector.create({
providers: [
{
...
- 140
0
votes
1
answer
102
views
How can I project dynamic filter chips using `ng-template`, `ngTemplateOutlet`, and `ng-content` in Angular?
I'm working on an Angular application where I need to build a reusable filter bar component that displays dynamic filter chips based on user selections. The filter chips need to be projected into the ...
- 117
1
vote
1
answer
45
views
Override ngComponentTemplate from root component
I am trying to wrap my head around the following issue. In the root-level app.component you have the following structure:
<div class="container">
<sidebar />
<menu-bar /&...
- 1,741
1
vote
1
answer
238
views
Deprecated ComponentFactoryResolver, Trying to use ViewContainerRef
I am trying to setup my auth.component.ts file to use ViewContainerRef from the placeholder.directive.ts file, but I am unsure what I need to populate inside the createComponent() at the end of the ...
2
votes
1
answer
104
views
Dynamically loading and rendering External files as component in angular
I have a use-case, where I should render an external angular component or web-component in an angular application.
I have created a sample application (stackblitz) to reproduce the scenario and below ...
1
vote
0
answers
248
views
How to dynamically create and manage multiple popup dialogs in Angular?
I am working on an Angular(17.x) project where I need to create and manage multiple popup dialogs dynamically. I aim to avoid manually creating separate components, inputs, and outputs for each popup. ...
- 1,219
0
votes
1
answer
62
views
Dynamically injected component's data is not being displayed in main component in Angular
I am currently trying to display a component's html view in another component in a chatbot setting. Let's call them chat component and component 2. So basically chat component which renders the main ...
1
vote
1
answer
111
views
Angular Material Table filtering of dynamic components
I often use components to display cell data in an Angular Material Table, including dynamic components created with ngComponentOutlet. When filtering those tables, I can't seem to properly filter ...
2
votes
2
answers
467
views
Angular directive @Input ignored when added to component via directive composition
I think I'm missing something very basic here, but I've been staring at this for too long. According the docs and everything else I've seen, an Angular directive's @Input() will be accessible on a ...
- 1,449
0
votes
2
answers
643
views
How to reuse Angular material table in Angular 17?
I have created a child component and use Angular Material. I am showing dynamic data which is passed to parent component. I am unable to action icon and name so that I can pass event in parent ...
1
vote
1
answer
771
views
Angular: Append dynamic created component as a child of the target-Element
I'm implementing a directive to add actions to a mat-table's mat-cell:
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<...
- 41
0
votes
0
answers
133
views
Angular dynamic components. How to add projectable nodes with parent component injector?
I create dynamic component:
const comp = createComponent(componentType,
{
environmentInjector: this.appRef.injector,
elementInjector: ...
- 140
0
votes
2
answers
908
views
Projecting a component inside a dynamic component
I can create a component dynamically and project some template inside it just fine with the following code -
@Component({
selector: 'dynamic',
template: `
<p>Dynamic Component<...
- 8,385
0
votes
3
answers
711
views
Angular - ViewChild of dynamic created Component is undefined
I want to open a component from a service without having to add that component to every other component which has the service.
In the service I have the following:
@Injectable({
providedIn: 'root',
}...
- 11
3
votes
0
answers
1k
views
Angular standalone dynamic components and Material Modules
I'm using dynamic components (angular v16) to dynamically render a template. For generic templates with standard html everything works fine, but cannot find a way to use components from material ...
- 31
0
votes
1
answer
651
views
Angular 16 docs: inject(ViewContainerRef) explanation
In the Angular docs' usage notes for ViewContainerRef I just don't get the statement inject(ViewContainerRef).
I'm pretty new to Angular and trying to find my way through the djungle of deprecated ...
0
votes
1
answer
557
views
ngFor not working inside dynamically loaded components
My 16.1.4 angular app is dynamically loading a component. Inside that component I have an array and am trying to use ngFor. ngFor will not display anything. If I show the number of entries in the ...
- 1,167
0
votes
1
answer
800
views
Lazy import component from the library's secondary entry point with absolute path using library's component
UPDATES:
Link to
Repo
Read a lot of documentation and checking examples, but unfortunately I have the worse combination ever. Lazy loading, dynamic import, absolute path with variable :
I have Angular ...
- 1
0
votes
1
answer
59
views
Dynamic addition and removal of components Angular
I have a container that contains two independent components.
The list of users comes to the first component from the backend part.
When clicking on a specific user, I need to show all of his complete ...
- 471
0
votes
0
answers
63
views
@ViewChildren and @ContentChilrden. Creating components dynamically
I have two questions.
I have a component ParentComponent inside it look like it:
@ContentChildren(ChildComponent) contentChildren!: QueryList<ContentChilrder>
@ViewChildren('childName') ...
- 140
0
votes
0
answers
62
views
Angular: dynamically create componet from route url
I am using Angular 6 in my application.
After calling a Web Api I compose an Angular route Url, for example /module-name/component-name/par1Value/par2Value/par3Value.
I now want to show the component ...
- 3
2
votes
1
answer
930
views
How to render childcomponents inside content with ngx-markdown in Angular 14
I've been banging my head against a wall for a while now trying to solve this problem. We have content coming in from an epi-server, the content is in HTML and needs to rendered dynamically in a ...
- 53
-2
votes
1
answer
265
views
Is there a way to pass data between two same level component in Angular using @Input?
Folder structure of the project (for reference)
dynamic-container.component.html
<h1>Dynamic component in angular</h1>
<ul>
<li (click)="createComponent(productNames....
0
votes
1
answer
549
views
Can I test the service together with the component. Angular unit tests
I have a service that creates a dynamic component in a slide component.
// service
open<T, R>(component: Type<T>, params?: { wide?: boolean; data?: R }): IxSlideInRef<T, R> {
...
- 25
3
votes
0
answers
504
views
Updating Angular, Error with my dynamically created components. "error NG1010: template must be a string Value is a reference to '"
I've taken over an old Angular project at my work and I'm tasked with upgrading it from version 6 to 14.
I've gone one version at a time as recommended by the Angular Update Guide. But now at version ...
- 53
2
votes
3
answers
4k
views
How do I pass input and event output to dynamic component in ng-container using ngComponentOutlet?
I'm trying to pass an event emitter and input to a dynamic component, but not able to get it through. My angular version is 10.
I want to perform something like this:
<ng-container [...
- 53
2
votes
0
answers
414
views
Add ng-container dynamically in Angular app
I am going to add a dynamic component to the Angular template.
Usually, it is done by creating a dynamic component via the existing ViewContainerRef in the template. But what about the situation where ...
- 21
0
votes
1
answer
309
views
Is there a way to store the class reference in a variable to instantiate the same later
I need to force a class to implement a method say okClick so I created an interface
interface BaseComponent {
okClick(): void
}
and made my class implement the same.
class ComponentImplementation ...
- 417
0
votes
1
answer
217
views
Dynamic component loader "formArrayName" Angular
I'm using Dynamic component loader to generate parts of form out of custom components. As I don't know up front how much of them will be, I've decided to use FormArray builder. Unfortunately it can be ...
- 93
0
votes
1
answer
431
views
Angular Create multiple components using ComponentFactoryResolver
I'm trying to create components dynamically using the ComponentFactoryResolver.
I have a component that has an @input that holds the component ref and the component inputs.
the problem is when the ...
- 315
0
votes
0
answers
340
views
Loading 50 dynamic Angular Components in *NgFor takes long time to initialize (15 secs)
I am loading 50 angular components in a ngFor loop
formItemList is a array and has 50 angular components
<mat-expansion-panel expanded="true" *ngFor="let item of formItemList; let i =...
0
votes
0
answers
307
views
NG 13 update to NG 14/15: Throttling navigation to prevent the browser from hanging
Started this app 5 years ago with Angular 2, till Angular 13 the dynamic routes lazy loaded works fine (with canActivate DynamicPathGuard), after a upgrade/update to NG 14/15 the browsers keeps ...
1
vote
1
answer
563
views
Angular 14 + Load Component Dynamically by name or selector (string) + lazy loaded module
I want to load component from different lazy loaded module as per my menu selected. My menu comes from database table. say as ex. as below:
MenuComponent
MenuID
Customer
1001
Supplier
1002
I have ...
- 1,193
0
votes
1
answer
3k
views
Access dynamically loaded child component instance
@ViewChild(ComponentType) comp!: ComponentType;
ngAfterViewInit() {
console.log('ComponentType instance', comp);
}
To get hold of a child component's instance, I know that ViewChild can be used as ...
- 3,276
0
votes
1
answer
347
views
Typescript error on creating dynamic components and module
Im trying to add the component and module dynamically as shown below
Component:
protected createNewComponent (tmpl:string) {
@Component({
selector: 'dynamic-component',
template: tmpl,
...
- 3,691
1
vote
1
answer
909
views
Angular - Dynamically adding / removing multiple instances of a single component without having to refresh the page to update the view
This is my 3rd attempt at asking this question.
This question will be long since I see no way of making it short.
Objective
What I’m trying to do is to have a simple web-app that has a header (which I’...
- 843
0
votes
2
answers
5k
views
Acessing Component ViewContainerRef createComponent() function from a different non related component results in error
Link to updated question.
I posted this question before. To briefly summarise; I’m trying to call a function that creates instances of a component using the ComponentFactoryResolver and ...
- 843
0
votes
1
answer
1k
views
Angular 14: Programmatically created component that has NgControl as a dependency
Trying to add a component to the DOM with ViewContainerRef createComponent. However, the component depends on NgControl. The end goal is to add components to a form using the FormBuilder.
Can't seem ...
-1
votes
1
answer
1k
views
Angular - A function defined in one component, that generates dynamic child components can’t be called in a separate non related component
Update to this in this new question.
I have followed this guide which I found by finding this question but then being pointed to this question as a fix for some of the issues that occurred in the ...
- 843
0
votes
1
answer
176
views
How can I render dynamic components in multidimensional array
I have a multidimensional array of components I want to render to a grid:
[
[
{
component: class TitleComponent,
data: {
title: "Invoice"
},
row: 1
}...
- 57
5
votes
1
answer
5k
views
Attach Angular component to document body
I would like to render an Angular component (an overlay) as a direct child of the documents body element. Today this can be done as follows:
constructor(
private applicationRef: ApplicationRef,
...
- 1,656
0
votes
1
answer
72
views
Angular EventEmitter parent This equals with the EventEmitter
My problem is when going back to the parent element after EventEmitter trigger my "this" is the EventEmitter itself at the parent, hence I cannot access any methods/variables which are part ...
- 383
1
vote
0
answers
335
views
How do I include a component in dynamically generated HTML string applied through [innerHTML] in Angular?
So I want to add a component inside of some HTML that has been inserted into the DOM through [innerHTML]. My current approach is as follows, but I am stuck at trying to obtain an ElementRef...
I am ...
- 11
0
votes
1
answer
831
views
What is the replacement for the Angular Compiler in v14?
I am trying to upgrade to Angular 14. My current app uses the Compiler from '@angular/core' to compile angular templates at runtime. In order to use it I had to include the --aot=false flag when I ...
- 2,377