When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML:

    <mat-dialog-actions class="dialog-actions">
        <button  class="cancel-btn" (click)="closeDialog(false)" [mat-dialog-close]="false" color="warn" mat-raised-button>
      {{cancelButtonText}}
    </button>

        <button *ngIf="!cancelOnly" id="dialog-confirm-button" class="confirm-btn" (click)="closeDialog(true)" [mat-dialog-close]="true" color="accent" mat-raised-button>
            {{ confirmButtonText }}
        </button>
    </mat-dialog-actions>

This code snippet is from my component.ts file:

    public openReset(): void {
        const dialogData = {
            headline: this.translate.instant('APP.RESET'),
            content: this.resetDialogContent,
            cancelOnly: true,
            cancelButtonText: this.translate.instant('APP.CANCEL'),
        };

        this.ui.openDialog(dialogData, { disableClose: false }, (confirmed) => {
            //implement logic here
        });
    }

I am facing an issue where the text specified in `cancelButtonText` is not displaying when using the *NgIf directive along with it. The plain text shows up fine, and removing *NgIf also displays the `cancelButtonText`. It seems that only the combination of *NgIf and `cancelButtonText` causes issues. Any insights on why this is happening?

Here are examples illustrating how it currently looks and how it should look like:

Picture with no text but button \n Picture with text and button but no *NgIf

I have double-checked all attributes and they seem to be properly set. However, I cannot figure out why the text is not showing as expected.

Answer №1

After much troubleshooting, I finally found the solution to my issue. To resolve it, I made the following changes to my HTML file:

<ng-template #stationDialogContent>
    <mat-form-field appearance="fill">
        
            <button mat-raised-button (click)="resetForm" class="factoryResetDialog">
                <span>Wirklich zurücksetzen?</span>
            </button>
        
    </mat-form-field>
</ng-template>
``

The problem was pinpointed to the button inside the mat-form-field. Once I removed it, everything started functioning properly.

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

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

Transfer the chosen language from the uib-dropdown language selector to the $scope variable

Here is a HTML template that allows the user to select a language: <div class="btn-group" uib-dropdown> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle> ...

The EmailInstructorsComponent is missing a component factory. Make sure you have added it to @NgModule.entryComponents

I am currently utilizing the ngx-admin template and attempting to create a modal that will open upon clicking a button. My goal is to display a form within the modal window, however, upon clicking the button, the modal opens but the form does not appear, r ...

Vue alert: Issue encountered in data() - "TypeError: Unable to convert undefined or null to object"

Can anyone help me figure out how to remove this warning? I suspect it's because I'm trying to manipulate an undefined object. Any assistance would be greatly appreciated! Thank you! Here is the code snippet: <v-card class="ma-3 pa-3" v-for=" ...

What steps do I need to follow to change the background color to white for the <App/> component in solid-js?

In my solid-js application styled with tailwindcss, I established a gray color in the index.css for the background of various screens. However, I wanted the main <App/> component to have a white background instead. To achieve this, I created an App.c ...

Container with Two Columns Extending to Full Height of Body

I'm currently referencing this example for reference: . In this layout, the left column has a fixed width in pixels while the right column is resizable. My goal is to set the height of the container to 100% of the body height. For instance, focusing ...

Discover the depth of a deeply nested array

I have a complex array structure that looks something like this: I am trying to determine the depth of this nested array, focusing on the element with the most deeply embedded children. let arr = [ { name: 'tiger', children: [{ ...

Issue encountered on IIS 7.x server during deployment with HTTPS

Currently, I am running an Angular + .Net 4.5 fullStack application on IIS V7.5 with Windows Server. To conduct additional tests, I am using multiple instances of the same site with different versions of the application deployed on the same host. Each inst ...

Encountering a GraphQL error during the compilation process

I've been following along with this informative tutorial: https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/ After completing all the steps, I encountered a GraphQL compile error: GraphQL Error There was an error while compiling y ...

Converting an image to a byte array in JavaScript

Does anyone know how to manipulate binary files in Javascript similar to C? I'm currently facing a critical scenario where I need to create a flipped image. Unfortunately, I don't have access to CSS, canvas, HTML, or the DOM - so I need to accomp ...

Modifying HTML tag attributes with inline server scripts

I am working with a submit button and trying to change the background color of the button itself after it has been clicked using inline server tags. <form id="form1" runat="server"> <input type="submit" id="submit" value="Submit" runat="server"/& ...

Tips for ensuring a document stays at the top of my collection when performing an update

Whenever I make changes to a document, it always ends up at the bottom of my collection. Is there a way to prevent this from happening? try { await Card.update({_id: fixedUrl}, {$push:{'comments': data}}) } catch (err) { console.log(err ...

Retrieve data from an array within the user Collection using Meteor and React Native

I need assistance with retrieving the entire array [votes] stored within the User Collection. Below is the JSON structure { "_id" : "pziqjwGCd2QnNWJjX", "createdAt" : ISODate("2017-12-21T22:06:41.930Z"), "emails" : [ { "a ...

How to utilize a defined Bootstrap Modal variable within a Vue 3 single file component

I'm diving into the world of TypeScript and Vue 3 JS. I created a single-file-component and now I'm trying to implement a Bootstrap 5 modal. However, my VSCode is showing an error related to the declared variable type. The error message reads: ...

What is the correct method to remove an item from local storage?

Using localStorage, I have stored multiple objects in an array. Is there a way to remove just one object from this array? If I use localstorage.removeItem(keysofthelocalstorage), I can delete the entire array, but I specifically want to remove only certai ...

Utilizing Angular 2's ViewChild within the <router-outlet> Tag

I've been working on a project using Angular 2. Within the MainComponent, I'm utilizing @ViewChild to reference child components. The MainComponent also contains a <router-outlet> where various components are loaded. My query is, how can I ...

Adjust the alignment of text on both ends of the HTML5 canvas

Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527 I'm considering incorporating the text into the d ...

JavaScript: The hyperlink provided in the data-href attribute is not functioning properly within the carousel

I have a carousel with images that I want to link to specific pages: JS Fiddle. My goal is to have each image in the carousel direct users to a different webpage when clicked. For example: Clicking on the wagon image should go to wagon.com Clicking on th ...

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...