Struggling to modify a modal using a component as content, but unable to get it working. The only thing showing is the backdrop, with the modal nowhere to be seen. Take a look at this modified stackblitz code for more insight.
Essentially, I'm aiming to adjust the width of the modal. The guide suggests passing the content template reference, as outlined in this section. However, in my scenario, I'm not passing a TemplateRef but rather a Component.
To fix the issue, simply remove the wrapping <ng-template let-modal> tags (including the closing tag) from the template of your component NgbdModalContent.
@Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...
Currently, I'm utilizing Express for Node.js and Stylus as the CSS engine. While Stylus is great, I'm facing some challenges in passing color variables or generating random colors. Despite attempting to use the javascript API for stylus, I find m ...
Hey there, I'm facing an issue with my code that resembles something like this: <ng-container *ngIf="firstCondition; else Farewell"> <ng-container *ngIf="innerContainer"> <div class="Hello Message"> {{HelloMessa ...
Is there a way to have "step-based heights" on a div? I created a small example to illustrate my question. My goal is to make sure that each box has a height that is a multiple of 400px. For instance, if a box with height: auto; is 345px, it should displa ...
I am currently working on a dropdown menu where I want to set an active state upon a click. The active class is added successfully when a link is clicked, but the issue arises when trying to remove the active class when another link is clicked. I only want ...
My CSS code is as follows: @media screen and (max-width :300px) { .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; text-decoration: none; } } This means that I intend to modify the CSS when the screen size goes below 300px. I hav ...
I am working on a project that involves organizing food items into categories. Each item has a corresponding table entry, with a field indicating which category it belongs to. The category is represented by a Guid but displayed in a user-friendly format. C ...
Upon running ng serve, I encountered a list of errors that need to be addressed. Here is my package JSON configuration: { "name": "ProName", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "tes ...
Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...
Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...
I'm currently working on implementing a modal, and I'm looking to link values from the formBuilder to a specific property. Here's the snippet of code I'm working with: submit(data?: any) { // THE FOLLOWING CODE WORKS, BUT IT'S ...
After successfully creating a simple react component and publishing it to the NPM registry, I encountered an issue when trying to use the same plugin in an Angular project. The custom plugin can be found at: https://www.npmjs.com/package/reactcustomplugin ...
After transitioning my project from Angular 13 to Angular 14, I encountered this error message: Error: NullInjectorError: R3InjectorError(DynamicTestModule)[UntypedFormBuilder -> UntypedFormBuilder]: NullInjectorError: No provider for UntypedFor ...
I have a function that returns a Promise, and within that Promise, I receive an object in the resolve. Below is the function from my service that is functioning correctly. buscarUsuario(email: string){ return new Promise((resolve, reject) => { this.ht ...
My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...
I've been experimenting with the WinBoxJS JavaScript library, and I'm familiar with using it in plain JS. However, I'm now attempting to integrate it into my Angular project. Can anyone guide me on how to achieve this? https://www.npmjs.com/ ...
I currently have a functioning inner-zoomable image set up with the code provided. I am interested in converting this setup into an image gallery with zoom capabilities for the selected image element, but I'm unsure where to start. My objective is to ...
I've been working on a website project using nodejs, expressjs, and pug as my template engine. I designed the home page in pure pug but ran into an issue when trying to add a background image to a specific section of the site. Despite double-checking ...
Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...
Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...