Issues with the Bootstrap Grid System not functioning correctly when inter-component communication is needed in Angular from parent to

This is the code from app.component.html file:

<div class="container">
    <div class="row" id="ads">
        <div class="col-xs-4">
        <app-card  *ngFor="let car of cars"
        [carNotifyBadge]="car.carNotifyBadge"
        [carNotifyYear]="car.carNotifyYear"
        [carCondition]="car.carCondition"
        [carPrice]="car.carPrice"
        [carUsageinKM]="car.carUsageinKM"
        [carName]="car.carName"
        [imgSource]="car.imgSource"
        >
        </app-card>

    </div>
    </div> 
    </div>

And this is the code from app.component.ts file:

import { Component ,Input} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']      
})
export class AppComponent {

  title:string = "Angular-App"

  cars = [

    {....},{....},{....}

  ]

}

Here is the code from card.component.html file:

<div class="card rounded">
  <div class="card-image">
      <span class="card-notify-badge">{{carNotifyBadge}}</span>
      <span class="card-notify-year">{{carNotifyYear}}</span>
      <img class="img-fluid" [src]="imgSource" alt="Alternate Text" />
  </div>
  <div class="card-image-overlay m-auto">
      <span class="card-detail-badge">{{carCondition}}</span>
      <span class="card-detail-badge">{{carPrice}}</span>
      <span class="card-detail-badge">{{carUsageinKM}}</span>
  </div>
  <div class="card-body text-center">
      <div class="ad-title m-auto">
          <h5>{{carName}}</h5>
      </div>
      <a class="ad-btn" href="#">View</a>
  </div>
</div>

And finally, here is the code from card.component.ts file:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {

  constructor() { }

  @Input()  carNotifyBadge = '';
  @Input()  carUsageinKM = '';
  @Input()  carName = '';
  @Input()  carNoticarNotifyYearfyBadge = '';
  @Input()  imgSource = '';
  @Input()  carCondition = '';
  @Input()  carPrice = '';
  @Input()  carNotifyYear = '';

  ngOnInit(): void {
  }

}

When displaying the columns using Bootstrap grid system and ngFor directive, they are appearing stacked one below the other. How can I make them appear side by side as expected?

https://i.sstatic.net/lorJ0.png

Answer №1

Ensure that the bootstrap CSS is properly loaded in your application. If not, you can follow these steps to include Bootstrap: Steps to include Bootstrap in Application

Remember to only pass the car item to the child component. All properties within the car object will be accessible in the child component.

<div class="container">
    <div class="row" id="ads">
        <div class="col-xs-6 col-md-4" *ngFor="let car of cars">
          <app-card [car]="car"></app-card>
      </div>
    </div> 
</div>

In the child component, make sure to receive the car object inputs from the parent component. @Input car;

Answer №2

Double check that Bootstrap is added to your bundled.css file.

Are there any styles in '#ads' that might be conflicting with Bootstrap's default behavior?

For assistance with installing Bootstrap, check out this helpful link: using-bootstrap-with-angular

Answer №3

Dealing with a similar issue, my solution involved using a bootstrap framework along with a custom theme based on it. My aim was to display a list of records in a grid layout using bootstrap.

My setup included a main app-component to showcase the webpage, and a card-list component to display the grid list within the app-component.

Initially, I included the following styles:

  styleUrls: [
'./credential-card.component.css',
'../../assets/css/bootstrap.min.css',
'../../assets/css/style.css']

Although the cards were styled correctly, the grid layout was not functioning as expected. Upon removing the styles:

  styleUrls: [
'./credential-card.component.css']

I managed to get the grid to work but lost the styling. To address this issue, I introduced another component called card-detail and linked it to card-list. Bootstrap CSS was removed from card-list and added to card-detail.

Eventually, the card-list component looked something like this:

<section class="pricing-wrapper pt-70 pb-100">
<div class="container">
    <div class="row justify-content-center">
        <div *ngFor="let item of credentials" class="col-lg-4 col-md-6 col-sm-8">
            <card-detail [shortName]="item.payload.doc.data().shortName" [priceDescription]="item.payload.doc.data().priceDescription"></card-detail>
        </div>
    </div>
</div>

And the card-detail component was structured as follows:

<div class="pricing-style-5 mt-30">
    <div class="pricing-header">
        <div class="pricing d-flex align-items-center flex-wrap">
            <h3 class="heading-3 font-weight-400 title">{{shortName}}</h3>
            <span class="price">{{priceDescription}}</span>
        </div>
    </div>
</div>

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

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

A PHP mishap causing unexpected errors

My login page confirmation code is giving me an error when trying to log in: Warning: mysql_fetch_row() expects parameter 1 to be resource, boolean given in /home/u133082736/public_html/login.php on line 14 This is the snippet of my code that's ca ...

Fetching JSON data using Javascript/JQuery

My goal is to access JSON data from an online web service that queries a MySQL database for a specific string and use Javascript to present it on an HTML page. My challenge lies in effectively displaying the retrieved information. The relevant part of my ...

Validating PHP code to ensure that either one of two form fields is filled in

I have been working on a website that utilizes javascript for various functions and PHP-based Captcha code to validate form fields. Everything is functioning well, but the form can still be submitted even if none of the fields are completed. I require at ...

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

Tips for assigning an event to a variable in JavaScript

Here is my javascript code snippet: function drag(ev){ var x= ev.dataTransfer.setData("Text",ev.target.id); } I am trying to pass a variable within this event so that I can perform a specific action. However, the current implementation is not worki ...

Steps for sending data to a modal window

Consider this scenario: I have a function that retrieves some ids, and I utilize the following code to delete the corresponding posts: onClick={() => { Delete(idvalue[i]) }} Nevertheless, I am in need of a modal confirmation before proceeding with the ...

What methods can I use to identify if the browser my users are using does not have support for Bootstrap 4?

My recent project heavily utilizes the advanced features of Bootstrap 4/CSS, making it incompatible with older browsers still in use by some of my visitors. How can I effectively identify when a user's browser does not support bootstrap 4 so that I c ...

Establishing a custom variable within a recurring component in a form for the purpose of validation

For my booking form process, I have different sections for adults, pensioners, children, and infants. While they all share the same four inputs, each section also has some unique input fields based on the type of customer. To streamline the duplicate secti ...

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

The sticky footer in React shifts upwards when the page has minimal content

Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, ...

What is the best way to generate this arc using CSS3?

What is the most effective method for creating this unique shape using CSS3? The square image should be clearly defined. We greatly appreciate any insight you can offer. EDIT: I have put in a lot of effort, but standard CSS methods are not getting me t ...

Generate listview items containing anchor tags automatically

I am currently developing a web application using Jquery Mobile. After retrieving data from a webservice function, I am utilizing an ajax call to display this data on my webpage. $('[data-role=page]').on('pageshow', function () { var u ...

Ways to manage an rxjs observable reaction that may potentially have no data?

Currently, I am working with Angular2 and Ionic2 using typescript and have a requirement to manage responses from the backend service. The response may either be empty with http status 200 or it could be a json object containing an error message property ...

In relation to CSS and HTML

I recently started working on a website built with HTML/CSS and encountered an issue with links highlighting when hovered over. The problem arises from the main image on the homepage containing an embedded link, causing the area under it to also highlight ...

What is the best way to expand all parent nodes of a specific child node in Angular 8 using the nested tree control of the mat tree?

getBookOutlineBar method is designed to take a list of nodes along with the selected node that needs to be highlighted when the outline sidebar opens. However, the current implementation only expands one specific node instead of all parent nodes. For exam ...

Utilizing Leaflet-geotiff in an Angular 6 Environment

I'm currently facing an issue where I am unable to display any .tif image on my map using the leaflet-geotiff plugin. I downloaded a file from gis-lab.info (you can download it from this link) and attempted to add it to my map, but I keep encountering ...

Creating a custom video to use as the favicon for my website

Imagine this: With the help of this plugin, you can have a video playing as your site's favicon using the following code snippet: var favicon=new Favico(); var video=document.getElementById('videoId'); favicon.video(video); //stop favicon.v ...

What are some strategies I can use to prevent issues with my web design while updating bootstrap?

I recently updated Bootstrap CDN from version 4.0.0 alpha to beta this morning. Here is a snapshot of how the web page looked before (still under construction): Website with Bootstrap 4.0.0 alpha And here is how it appears now: With Bootstrap 4.0.0 bet ...