Passing a class from a string value in Angular 2 using TypeScript

class SimpleComponent {

}


var myClass = 'SimpleComponent';

bootstrapComponents.push(myClass); // Ensure that 'SimpleComponent' class is passed and not just a string.

Is there a way to transform a string value into a class object in typescript?

Answer №1

include the key in the class name

var className={'ComplexComponent':ComplexComponent};

componentLibrary.push(className[string]);

Answer №2

From my understanding, the idea behind the modular approach in angular2 is not to store classes in arrays or objects and move them around, but rather to export classes and import them where necessary. Instead of handling everything in one place, it's recommended to segment your application into modules and then load them through the router. This way, unused modules and their components will only be loaded when they are required, unless specified otherwise through lazy loading.

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

Display Issue with Header Row in React Data Table Component - Full Text Not Visible

Hey there! I've been working with a neat npm package called react-data-table-component. However, I've run into a bit of trouble trying to adjust the width of the table header text. Take a look at the issue here: https://i.sstatic.net/AzqNw.png ...

Challenges transitioning syntax from Firebase 4 to Angularfire2 in Angular 4

Currently, I'm in the process of updating my Angular 2.3.1 and Firebase 2.x.x project to the newest version. However, I'm encountering difficulties with syntax and imports. I've been exploring resources like https://github.com/angular/angula ...

Tips for converting necessary constructor choices into discretionary ones after they have been designated by the MyClass.defaults(options) method

If I create a class called Base with a constructor that needs one object argument containing at least a version key, the Base class should also include a static method called .defaults() which can set defaults for any options on the new constructor it retu ...

I must automate the process of navigating to a different page within my website

My current dilemma involves using the header() function in PHP to automatically redirect a user to another page on my site after they dismiss an alert() box. However, the desired outcome is not being met. Here are my requirements: 1) Display a JavaScript ...

Searching Firebase by using comparison operators on various fields

const FindFiis = async () => { const data: any[] = []; // Firebase query with inequalities on different fields to retrieve docs. // Objective: Select documents where dividendYield is between 8 and 20 and pvp is less than or equal to 1. ...

Establishing standard emit actions in a Vue JS component layout

I am dealing with a complex situation involving two nested Vue JS components. The child component is emitting certain events to the parent function, which I have defined within the parent component declaration. The issue here is that these events are being ...

What methods can be used to configure Jasmine to read individual Vue component files?

I recently installed Jasmine and Vue through npm, but I'm encountering an issue when trying to import the Vue component itself, which is a .vue file. It seems to be having trouble reading the template section enclosed within <template></templ ...

What are the steps to applying strike-through text in Vue.js?

I am currently working on a to-do application using Vue.js and I want to implement a feature where the text rendered in HTML has a line through it when the user checks an item off the list. Here is the snippet of my code: <html> <head> & ...

Implementing Global Value Assignment Post Angular Service Subscription

Is there a way to globally assign a value outside of a method within my app component? This is how my service is structured: import { NumberInput } from '@angular/cdk/coercion'; import { HttpClient } from '@angular/common/http'; import ...

An error of TypeError is being encountered in AngularJS

Hello, I am new to creating mobile apps with Ionic and Angular. Currently, I have a simple login form and a corresponding login button that triggers a controller. Here is the code snippet for the controller: angular.module('starter.controllers', ...

Why isn't $.post functioning properly in any instance?

I've been experiencing issues with my $.post calls throughout my code. Despite not sending requests to different domains, everything is localhosted. My Mac OS X 10.8 automatically defined my localhost alias as ramon.local, and I'm trying to make ...

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

When trying to insert "- " into an empty textarea, I am facing issues with Internet Explorer. While Firefox and Chrome work perfectly fine by inserting the text as expected, IE causes it to jump to the beginning of the textarea after insertion. Therefore, ...

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

Employing union types and type guards within templates while utilizing ngForOf in Angular

When utilizing array: (A | B)[] within an *ngFor, it appears that the only option is to use $any() extensively throughout the template. Is there a more efficient way to handle this situation? I've managed to bypass typing altogether by using $any(), ...

What is causing Puppeteer to not wait?

It's my understanding that in the code await Promise.all(...), the sequence of events should be: First console.log is printed 9-second delay occurs Last console.log is printed How can I adjust the timing of the 3rd print statement to be displayed af ...

Euler 13: Surprising outcome when attempting to combine several String variables

I'm currently working on a challenging problem found on euler: here Large sum Problem 13 In this problem, the task is to determine the first ten digits of the total sum when adding up one-hundred 50-digit numbers. 37107287533902102798797998220837590 ...

Modifying a group of Components in Angular using a Service

Managing a set of Components involves changing their properties using a Service. The Components have a minimal model and are meant to remain compact. They are being rendered with *ngFor. The Service possesses a large Object and should possess the abilit ...

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

What is the best way to keep JWT secure in a web browser?

Recently, I delved into the world of JSON Web Tokens (JWT) for the first time. I'm currently working on a Node.js application utilizing the Hydra-Express framework. My goal is to implement JWT for authentication purposes. Following the documentation, ...

Tips for troubleshooting a React Native project built with Expo and utilizing TypeScript

I started a new Expo project with TypeScript integration. After launching the app using expo start, I noticed that the Chrome debugger only displays .js files at http://localhost:19001/debugger-ui/: https://i.stack.imgur.com/cmyy9.png How can I make sur ...