Curious about how to add a random component to an html file using Angular? Let's say, we have three components with unique html and css:
export class Component1{}
export class Component2{}
export class Component3{}
I would like the root of the app to display one of these components randomly.
<app-randomComponent></app-randomComponent>
The initial concept was to store all components in a data structure and access them from there. What is the best way to do this?
The best choice for your situation would be to utilize the NgComponentOutlet directive.
Here is how you can implement it:
<ng-container *ngComponentOutlet="myRandomComponent"></ng-container>
In your Typescript file:
const myComponents = [Component1, Component2, Component3]
myRandomComponent = myComponents[Math.floor(Math.random() * (myComponents.length))]//updated
To take control of this process at the bootstrap level, utilizing the Angular bootstrap interface is the way to go.
https://angular.io/api/core/DoBootstrap
Start by removing or emptying the bootstrap property in the app module.
Next, implement the DoBootstrap interface and provide an implementation for the ngDoBootstrap method. Based on your specific business requirements, determine which component should be included.
In the index.html file, make sure to update the body tag as shown below.
<body> <div id="bassApp"></div></body>
The App Module will appear as follows:
@NgModule({
declarations: [
AppComponent,
Component1,
Component2,
Component3
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: []
})
export class AppModule implements DoBootstrap{
ngDoBootstrap(appRef: ApplicationRef): void {
// Modify the component that needs to be injected based on your logic
appRef.bootstrap(Component1, document.getElementById('bassApp'))
}
}
My project involves an HTTP service that sends requests to the server and receives responses. Sometimes, different errors occur on the server during development which do not always return JSON. In such cases, I need to retrieve the response body as a strin ...
Wondering if it's possible to declare an object inside my model. First attempt: export class Employee{ emp_id: number; emp_fname: string; emp_lname: string; emp_birth: string; emp_status: string; emp_photo: string; emp_dep ...
Every time I try to install one of the popular masonry packages for Angular, I encounter the same frustrating error. It's getting to the point where I feel like pulling my hair out. Unexpected token d in JSON at position 702 while parsing near ' ...
My interest in this matter stems from curiosity. The title may be a bit complex, so let's simplify it with an example: type ObjType = { items: Array<{ id: number }>; sth: number }; const obj: ObjType = { sth: 3, items: [{ id: 1 }, { id: 2 } ...
Currently in the process of migrating my angular application to nginx. The url rewrite configuration I have set up seems to be functioning properly only for the / location. When attempting to access localhost:5000/login in the web browser, a 404 error is ...
Looking for a way to disable ng-select using a directive. Does anyone have any suggestions on how to accomplish this? Here is the code I have been working with, along with an example that I was trying to implement. setTimeout(() => { const selectElem ...
While working with WebStorm 2019.3.2, I have noticed some warnings in Angular templates: https://example.com/image.png This is happening because the properties are being initialized on the parent component instead of the child. @Component({ selector: ...
I am looking to define a unique type that must be a function which, when executed, will always produce an object containing the property type: string. The input parameters for this function are of no concern. For instance: foo(1, 'bar'); // res ...
I am currently working on developing an online board app using React, Next.js, and TypeScript as a project for my portfolio. This is my first time using TypeScript. However, I encountered an issue with importing roughjs into canvas.tsx. Below is the code ...
Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...
When working with fp-ts, and conducting unit tests using Jest, I often come across scenarios where I need to test nullable results, typically represented by Option or Either (usually in array find operations). What is the most efficient way to ensure that ...
After watching Kara Erickson's demo of Angular forms at AngularConnect 2017 on YouTube, I was intrigued by her explanation of nested reactive forms. The issue I encountered was that no matter what I tried, I kept getting a null parentForm. Below is a ...
I'm currently working on implementing a context wrapper. My goal is to pass the state variables as provider values and then access those values by using useContext in the ToolBar component. type NavContextType = { isDrawerOpen: boolean; setIsD ...
I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...
{ "Id": "12345", "length": [ { "review": { "1": { "request": [ { "days" ...
An issue arises in Typescript with the error message "Object is possibly 'undefined'" when attempting to access an element at a negative index using array.at(-1).key //array[array.length - 1].key. This error does not occur in the following code: ...
I am currently experimenting with a straightforward login form that includes an asynchronous call in React using TypeScript and classes. Here is how my component appears: import * as React from 'react'; import { LoginService } from './servic ...
I am facing an issue with my FormGroup in my form where it is not recognizing the standard values coming from my web api. It sets all the values to null unless I manually type something into the input field. This means that if I try to update a user, it en ...
I am facing an issue with styling in an iframe when trying to append my own angular component. Despite various attempts, I have been unsuccessful in getting the styling to apply to the component within the iframe. Upon loading the iframe, I use JavaScript ...
I have implemented the code exactly as provided in the example from https://material-ui.com/components/bottom-navigation/: // code in app.tsx: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Bo ...