Flex Layout and *ngFor Loop Not Producing Expected Result - Angular

1

I searched but couldn’t find a question quite like mine. Apologies if there’s an answer somewhere.

I’m attempting to do a very simple flex layout in row format where 2 containers are side by side. I have a card component with an ngFor loop inside another component. Here’s my code:

top-cta-HTML:

<section id="cta-container">
  <h1>Take Control of Your Financial Future</h1>
  <h4>
    Whether you’re looking at annuities to guarantee future income, <br />save
    for a life change, or selling your structured settlement,<br />
    we’re here to help with guidance, advice, and experience
  </h4>
    <app-cta-card></app-cta-card>
</section>

top-cta-CSS:

#cta-container {
  margin: 2.5rem 0 0 auto;
  padding: 0 20px 0 5px;
  background-color: orange;
  width: 35%;
  border-bottom-left-radius: 60px;
  text-align: end;
}

#cta-container h1 {
  font-size: 2.75rem;
  font-weight: 900;
}

#cta-container h4 {
  margin-top: -20px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5em;
}

card-HTML:

<article id="card-parent-container">
  <div class="top-cta-card" *ngFor="let card of ctaCards">
    <div class="cta-card-topper">1</div>
    <h3>{{ card.title }}</h3>
    <a href="#" class="top-cta-links">&#10132;</a>
    <p>{{ card.description }}</p>
  </div>
</article>

card-CSS:

.top-cta-card {
  background-color: var(--cream);
  width: 300px;
}

#card-parent-container {
  display: flex;
  flex-direction: column;
}

.cta-card-topper {
  background-color: var(--teal);
  height: 100%;
  width: 100%;
  color: var(--teal);
}

.top-cta-links {
  background-color: var(--teal);
  color: var(--cream);
  padding: 5px 6px;
  border-radius: 50%;
  box-shadow: 3px 2px 3px var(--gunMetal50);
}

This code produces 2 cards stacked on top of each other and no matter what I change they won’t sit in row format.

As a test, I made 2 divs inside the top-cta-HTML file with no ngFor loop and got the desired result. Any ideas here on what I’m doing wrong?

Here is a Stack Blitz link that might help since you can visualize the issue https://stackblitz.com/edit/angular-yogk3e

Thank you for any and all help, I really appreciate it!

2

The problem is that you have your CSS as if each white and blue box (“Get Cash Now” and “Purchase Annuities”) are cards within #card-parent-container, but the *ngFor is within the card, creating multiple divs inside your app-cta-card component. To change the appearance, I simply moved the flex properties to the app-cta-card level (and fixed an issue with the card topper).

Here is a fork of your stackblitz with only the CSS changed:

Semi-related: It’s considered a bad practice to use ids in Angular applications because ids must always be unique and components should be reusable and/or extendable.

1 Like
3

For the record, I develop in Angular professionally and frequently find myself swearing at my pages because flex properties are applied at the wrong level. It happens all the time.

1 Like
4

Thank you so very much, I was really confused why my flex wasn’t working properly. I’m fairly new to Angular (I’d never used it/learned anything about it before July 2019) so I’m still learning how it operates lol

I really appreciate the fast and in-depth answer! Also thank you for the tip on using ids in Angular, I’ll definitely replace that behavior with using classes instead :slight_smile:

I’m glad to hear I’m not the only one that it happens to ahaha :+1:

5

I’m glad that I could help. Happy coding!

1 Like