Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible.

Here is an example :

-HTML CODE-

<button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComponent('new_post_form_modal')"><i class="material-icons">gesture</i></button>
      <div class="modal-content" id="loadHere" >
          <!-- CUSTOM COMPONENT WILL BE LOADED HERE  -->
      </div>

-TYPE SCRIPT CODE-

public loadCustomComponent(componentName:any)
{
    // Dynamically load componentName inside the div with id="loadHere"
}

Any assistance with this would be greatly appreciated. Thank you!

twitter-bootstrapangulartypescriptmodal-dialog

Answer №1

Creating dynamic components can be achieved as shown in the example below:

   @Component({
     selector: "parent",
     template: `<button id="floating_button" class="floating_button animation_floating_in" (click)="createNewPost('new_post_form_modal')"><i class="material-icons">gesture</i></button>
  <div class="modal-content" #loadHere > ;
      <!-- LOAD MY CUSTOM COMPONENT HERE  -->
  </div>`
   })
   export class ParentComponent {
      @ViewChild("loadHere", { read: ViewContainerRef }) childContainer: ViewContainerRef;

    constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}

    createNewPost = (componentName): void => {
       componentToLoad = 'resolve component here using componentName'; 
       this._cr.resolveComponent(componentToLoad ).then(cmpFactory => {               
          this.childContainer.createComponent(cmpFactory);
       });
     }
   }

If passing parameters is needed, you can refer to this resource

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

What is preventing me from executing the "npm update" command in my Ionic project?

I am having trouble running the npm update or npm install command in my ionic project and I keep getting an error message. Additionally, here is the output of my "ionic info" command: ...

angularionic-frameworknpmcapacitor

Using AngularJS with CDN: A beginner's guide

If I need to create an app using AngularJS with Cordova in Visual Studio, do I need anything else besides the Google CDN for AngularJS? <!doctype html> <html ng-app> <head> <title>My Angular App</title> <script s ...

angularjscordovatypescriptvisual-studio-cordova

Angular configuration files fail to be exchanged promptly

I am utilizing Angular 9 with the View Engine compiler. I have two separate files where I hold environment variables: environment.ts: export const environment: any = { production: false, }; environment.prod.ts: export const environment: any = { ...

angularenvironment-variablesng-modulesangular-compilerangulartics2

An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

Issue with running the ionic serve command [ng] Error: The Angular Compiler requires TypeScript >=4.4.2 and <4.5.0 but 4.5.2 was found instead. Attempted to downgrade typescript using: npm install typescript@">=4.4.2 <4.5.0" --save-dev --save- ...

angulartypescriptionic-frameworknpm

When the next() function of bcrypt.hash() is called, it does not activate the save method in mongoose

Attempting to hash a password using the .pre() hook: import * as bcrypt from 'bcrypt'; // "bcrypt": "^1.0.2" (<any>mongoose).Promise = require('bluebird'); const user_schema = new Schema({ email: { type: String, required: tru ...

typescriptmongoosebcrypt

Uploading Multiple Files to a REST API Using Angular 6's Reactive Form

Looking to create a file uploader in Angular 6 using a reactive form. Once all files are selected, there will be an upload button to start uploading the files. The issue I'm facing is that I can't access all the files from the component without u ...

angularangular6angular-reactive-forms

Tips for troubleshooting a Typescript application built with Angular 2

What is the best approach for debugging an Angular 2 Typescript application using Visual Studio Code or other developer tools? ...

debuggingangulartypescript

Customizing icons in jQuery alongside text: Tips and tricks

Here is the JsFiddle I'm currently working with: <div class="col-md-6"> <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S"> Show Advance Search <span class="glyphicon glyphi ...

jquerytwitter-bootstrap

Is the Dropbox JavaScript SDK compatible with Ionic3?

Does anyone know how to integrate the Dropbox JavaScript SDK into an Ionic 3 app? Just a note: I have come across some sample examples using the http endpoint. ...

angularionic-frameworkdropbox

What causes a union with a conditionally assigned property to lead to more relaxed types than anticipated?

Take a look at this TypeScript code snippet: const test = Math.random() < 0.5 ? { a: 1, b: 2 } : {}; Based on the code above, I would assume the type of object 'test' to be: const test: { a: number; b: number; } | {} This is the most str ...

typescript

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

javascriptangulartypescript

Understanding 'this' in ChartJS within an Angular application

Here is my event handler for chartJS in Angular that I created: legend: { onClick: this.toggleLegendClickHandler After changing the text of the y scale title, I need to update the chart. I am looking to accomplish this by calling this._chart.cha ...

javascriptangularchart.js

Convert string to integer value

Is it possible to convert a literal string type (not runtime value) to its corresponding numerical type, for example '1' to 1? I am looking to restrict a variable to only being a key of an object (assuming the type of obj is precise since TypeSc ...

typescript

The input text in the Typeahead field does not reset even after calling this.setState

As I work on creating a watchlist with typeahead functionality to suggest options as the user types, I encountered an issue where the text box is not resetting after submission. I attempted the solution mentioned in this resource by calling this.setState( ...

javascriptreactjstypescriptstate

Tips for implementing dynamic properties in TypeScript modeling

Is there a way to avoid using ts-ignore when using object properties referenced as strings in TypeScript? For example, if I have something like: const myList = ['aaa', 'bbb', 'ccc']; const appContext = {}; for (let i=0; i< ...

typescripttypescript-typings

What is the best way to include start and end labels on Bootstrap's progress bars?

Is there a way to add start and end labels directly below the progress bar in Bootstrap? Here is an example of what I want: [||||||||------------] <Start Label> <End Label> I have been searching for a solution, but it seems ...

csstwitter-bootstrap

Error encountered during compilation while attempting to import a JSON file in Angular 7

One great aspect of angular 7 is its compatibility with typescript 3.1: https://alligator.io/angular/angular-7/ I have made the following changes to the tsconfig.json file, within the 'compilerOptions' section: "resolveJsonModule": true, "esMo ...

angulartypescriptcompiler-errors

How can you resolve the error message "No overload matches this call." while implementing passport.serializeUser()?

Currently, I am working on implementing passport.serializeUser using TypeScript. passport.serializeUser((user: User, done) => { done(null, user.id) }); The issue I am encountering is as follows: No overload matches this call. Overload 1 of 2, &ap ...

typescriptexpresspassport.js

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

javascriptreactjstypescripttypes

Angular - Ensure completion of a function call before continuing with the code execution

I'm currently working on developing a code snippet that checks for potential adverse drug reactions between two medications. Within my checkForClash() function, there is a call to getCollisionsList(), which is responsible for populating the interacti ...

javascriptangularasynchronousfrontend