When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows:

"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz",

I am attempting to display a tab between 1 and 3 if a certain condition is met.

Typically, the website layout appears like this:

Tab intro | tab order | tab complete

Tab intro | Tab pre-registration | tab order | tab complete

The usual way to handle this scenario would be:

<mdb-tabset #tabs
    <mdb-tab header="Tab Intro">...
    <mdb-tab *ngIf="requirePreregistration == true" header="Tab pre-registration">...
    <mdb-tab header="tab order">...
    <mdb-tab header="tab complete">..

However, the tab is only added to the display if the condition is true.

Tab intro | tab order | tab complete | Tab pre-registration

If the condition is false, the tab remains hidden. This page contains a lot of code. Any suggestions on what can be done?

Below is the TypeScript snippet, in case it is needed:

ngOnInit() {
    if (order.type == RequestPaymentType.PreRegister)
        this.requirePreregistration = true;
}

I am aware that tabs can be dynamically created. I have attempted to assign them an index; perhaps ChangeDetectorRef could assist with this?

Reference:

Answer №1

in simple terms

include tabOrder, no changes needed in the typescript code, I was getting errors when trying to do it, but I was on the correct track

<mdb tabOrder="1"
<mdb tabOrder="2"

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

Effortlessly glide to the form and center your attention on the textarea

Upon clicking the link, I aim to accomplish three tasks: Implement smooth scrolling down to #form Automatically focus on the textarea for immediate message writing Add extra top margin to account for a fixed top bar on the website. <a class="link" ...

The angulartics2 event is not functioning correctly

I have implemented the angulartics2 library in my project. import { Component } from '@angular/core'; import { Angulartics2On } from 'angulartics2'; @Component({ selector: 'random-component', directives: [Angulartics2On] ...

Error in Angular 5: Google Maps not defined

Having trouble implementing Google Maps on my Angular 5 app. Upon loading the view, I am encountering this error in the JavaScript console: LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined at LoginComponent.ngAfterVie ...

Direct your attention to the <input> element

I'm developing a front-end application using Angular 5, and I am facing the challenge of implementing a hidden search box that should be displayed and focused when a button is clicked. Although I have explored various solutions from StackOverflow inv ...

Hide a dialogue box by clicking outside of it

I am working on an Angular application that features a pop-up dialog for user input. I want the dialog to close or hide when the user clicks anywhere outside of it within the main application. This way, the user can input data without interruptions, and th ...

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: https://i.sstatic.net/FsHq5.png The problem lies in my inability to underline the selected optio ...

Display issue with React TypeScript select field

I am working with a useState hook that contains an array of strings representing currency symbols such as "USD", "EUR", etc. const [symbols, setSymbols] = useState<string[]>() My goal is to display these currency symbols in a select field. Currently ...

Angular 6: Exploring the Challenges of Extending Services Without Sacrificing the Functionality of ChildService

As I was developing multiple angular REST-services for my frontend, I came up with the idea of creating a base class BaseRestService to handle common functionalities like headers and helper functions. However, I encountered TypeErrors when trying to call ...

A guide on displaying a dynamically generated HTML string as HTML within an Angular 6 framework

I'm having trouble displaying Dynamic HTML (dropdowns) created with TypeScript. When I attempt to show it using innerHTML, the options appear as text instead of a dropdown menu. {{question.question}} <div [innerHTML]="question.question" c ...

Discover the step-by-step guide to implementing pagination using NG-ZORRO-Andt in your Angular

I am currently using NG-ZORRO Ant Design pagination on my HTML page and it is displaying correctly in my browser. However, I am struggling with linking the data from the API to the pagination feature. Here is the snippet of my HTML code: <div class ...

CSS - Nesting classes within one another

I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the u ...

Is there a way to convert a typescript alias path to the Jest 'moduleNameMapper' when the alias is for a specific file?

I am currently working on setting up Jest in a TypeScript project. In our tsconfig.json file, we are using path aliases like so: "baseUrl": ".", "paths": { "@eddystone-shared/*": [ "../shared/*" ], "@eddystone-firebase-helpers/*": [ "src/helpers/fire ...

Protractor Browser Instance Failure

We have encountered an issue with our UI suite failing in Chrome during the login process. Initially, we thought it might be due to upgrading to Chrome 79, as the problems arose simultaneously. Interestingly, the login functionality still works smoothly in ...

The call to the Angular service has no matching overload between the two services in Typescript with 13 types

I encountered an error while creating a new Angular project following a tutorial, and I'm seeking assistance to understand it. The error message reads: "No overload matches this call. Overload 1 of 5... Type 'Object' is missing the followi ...

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...

Tips for ensuring Opera browser compatibility with buttons using the CSS background image property

Is there a way to make background images work on buttons in Opera web browser using CSS? I've tried using the background image property, but it doesn't show up when I use Opera. Strangely enough, it works fine in Firefox. However, I have noticed ...

Locate and retrieve the item that appears most often in a given array

In order to determine the mode of an array consisting of integer numbers only, I must create a function named findMode. If the array is empty, the function should return 0. Otherwise, it should return the element that occurs most frequently in the array. I ...

How can the height of a Material-UI Grid item be dynamically set to match its width?

I am trying to create grid items that are square, where the height matches the width: const App = ({ width, items }) => ( <Grid container> {items.map((v) => ( <Grid item md={width}> // I want this Grid item to be square ...

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

Is it possible to transfer the setState function between different contextProviders?

I'm encountering difficulties in setting a state when passing the context provider to other elements. Here is my code snippet. I have created a FancyboxContext so that I can easily access it from anywhere in the app. import React, { createContext, use ...