Using a BehaviorSubject in conjunction with ngIf can rearrange the placement of elements

I am facing an issue with the placement of my HTML tags. Here is a snippet from my service:

public showExportCsvModal = new BehaviorSubject<boolean>(false);
public showDownloadModal = new BehaviorSubject<boolean>(false);

And here is how it looks in my html:

    <p *ngIf="stateService.showExportCsvModal | async">
        {{'exportModal.severalMinutesToComplete' | translate }}
    </p>
    
    <p *ngIf="stateService.showDownloadModal | async">
        {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
    </p>

    <p>
        {{'exportModal.downloadTheFinishedFileFrom' | translate }}
    </p>

The problem I'm encountering is that the third p tag appears at the top, creating unwanted visual hierarchy. This image shows the issue: https://i.sstatic.net/KLZOJ.png

Can anyone suggest a solution to prioritize the display order of these ngIf statements? Your assistance is greatly appreciated.

angulartypescriptangular-ng-ifbehaviorsubject

Answer №1

Make sure to include 

{{'exportModal.downloadTheFinishedFileFrom' | translate }}
in every <p *ngIf>

<p *ngIf="stateService.showExportCsvModal | async">
    {{'exportModal.severalMinutesToComplete' | translate }}
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

<p *ngIf="stateService.showDownloadModal | async">
    {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

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

Angular, Transforming JSON with RxJS Operators in TypeScript

Upon receiving the JSON object (Survey) from the server, it looked like this: { "id": 870, "title": "test survey", "questions": [ { "id": 871, "data": ...

jsonangulartypescriptrxjsoperators

In TypeScript, vertical bars and null are commonly used for type unions

Greetings! I am just starting to learn JavaScript and TypeScript I have a question about the code snippet below What does the pipe symbol (|) signify? Also, why is null = null being used here? let element: HTMLElement | null = null; ...

typescript

Combining a pair of canvases

Currently, I am utilizing a JavaScript library to create a QR Code. This library generates the QR code by displaying it on a canvas. Nevertheless, my goal is to integrate a background behind this QR Code. I attempted to achieve this by first drawing the b ...

javascripthtmlangulartypescripthtml5-canvas

How can I designate the first enum value as 1 in a protobuf data structure?

In order to resolve an issue in the dropdown component of Primeng, the first enum value in protobuf must be set to 0. However, this is causing some trouble. Is there a method to change the first enum value to 1 instead? ...

angularprotocol-buffersprimeng

Adding SVG to Component

I am attempting to embed an SVG element (retrieved using http.get()) into a 'icon' component. export class BgIcon { private svgSrc_: string; icon_: Icon; @Input('svg-src') set svgSrc(value: string) { this.svgSrc_ = value; ...

svgtypescriptangular

Join the Observable in Angular2 Newsletter for the latest updates and tips

One of my functions stores the previous URL address. prevId () { let name, id, lat, lng; this.router.events .filter(event => event instanceof NavigationEnd) .subscribe(e => { console.log('prev:', this.previo ...

javascriptangulartypescript

What is the best way to pass a state within a route component in react-router?

... import { useNavigate, NavigateFunction } from "react-router"; ... function Form(): JSX.Element { const navigateToCountry = (country: string) => { // Code to navigate to country page with the given country } const [selectedCount ...

javascriptreactjstypescriptreact-hooksreact-router

Every time I hit the refresh button, I receive dual responses

In my angular 6 application, there's a sidebar component sidebar.ts ngOnInit() { if (!Array.isArray(this.menu) || !this.menu.length) { const data = JSON.parse(localStorage.getItem('data')); this.item = data.response; ...

angularangular6

Can you input a string into a generic in TypeScript and subsequently utilize it as a type/interface key?

I had high hopes for achieving this, but unfortunately it's a no-go: type MyType< T extends {}, K extends string = 'keyName' > = T & { [K]: { value: string } }; The error states that a computed property name in a typ ...

typescripttypescript-typings

Why is it advantageous to use Observable as the type for Angular 5 component variables?

Being a beginner in Angular 6, I have been exploring the process of http mentioned in this link: https://angular.io/tutorial/toh-pt6#create-herosearchcomponent One thing that caught my attention was that the heroes array type is set to Observable in the ...

angulartypescripthttpobservable

Using Typescript: Including an additional argument

While experimenting with the code provided in the documentation interface Point { x: number; y: number; } function getX(p: Point) { return p.x; } class CPoint { x: number; y: number; constructor(x: number, y: num ...

typescripttypescript1.7

Encountering an error when attempting to include React TypeScript onChange with a Material UI switch component

I'm working on implementing a show/hide functionality using a switch. I want the component to be displayed when the switch is turned on and hidden when it's turned off. Here's the code I've written: const VirtualEventSection = ({ con ...

javascriptreactjstypescriptmaterial-ui

Steer clear of chaining multiple subscriptions in RXJS to improve code

I have some code that I am trying to optimize: someService.subscribeToChanges().subscribe(value => { const newValue = someArray.find(val => val.id === value.id) if (newValue) { if (value.status === 'someStatus') { ...

javascriptangulartypescriptrxjs

Ways to incorporate suspense with NextJS 14 - how can I do it?

I am looking to add a suspense effect to the initial loading of my page while the assets are being fetched. These assets include images on the home screen or as children of the RootLayout component. How can I implement an initial Loading state for these ...

reactjstypescriptnext.jsnext.js13react-suspense

Unlocking the potential of nested conditional types in TypeScript

The source of the autogenerated type below stems from a GraphQL query: export type OfferQuery = { __typename?: 'Query' } & { offer: Types.Maybe< { __typename?: 'Offer' } & Pick<Types.Offer, 'id' | 'nam ...

typescripttypescript-typingsreact-typescript

Encountering an unexpected token while trying to use createUserWithEmailAndPassword in firebase/auth with Next.js and TypeScript left Jest puzzled

I have been working on integrating Firebase authentication into my Next.js project (using TypeScript), but it appears that there are configuration issues with Firebase causing my Jest tests to fail. Here are the key configuration files: jest.config.js : ...

typescriptfirebasenext.jsjestjsfirebase-authentication

How to manipulate dates using Angular 2's date pipe to add or subtract hours

I am encountering an issue with the new Angular 2 Date Pipe. My date value is as follows: let myDate = '2017-01-31T17:53:36' When I use the Date Pipe to format it in the view like this; {{myDate | date: 'dd/MM/yyyy HH:mm' }} It dis ...

dateangularfilterpipe

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

I've discovered two different approaches for delaying an Angular bootstrap until a Promise or Observable is resolved. One method involves using APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: (configService: ConfigurationService) => ( ...

javascriptangular

Modifying the date format of the ag-Grid date filter

On my Angular 5.2.11 application, I utilize ag-grid to showcase a table. The date column is configured with the default date filter agDateColumnFilter as per the documentation. After enabling browserDatePicker: true, the Datepicker displays dates in the ...

angulartypescriptag-gridag-grid-angular

Is anyone able to assist with resolving the problem of `tsc` constantly monitoring `node_modules`?

Using the Expo platform has been a great experience for me. Here is a snippet from my tsconfig.json: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ], ...

typescriptreact-nativeexpotscreact-native-gifted-charts