Bootstrap Grid System not working in Angular Components communicating from parent to child

user_3819513 0
Viewed 2325

app.component.html code 

<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>

app.component.ts code

                             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 = [

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

                    ]


                    }

card.component.html

                     <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>

card.component.ts

                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 {
                  }

                }

Since in app.component.html I have used grid system of bootstrap and using structural directives ngFor I am dynamically adding elements to DOM. I expect the cols to be side by side, whereas I am getting it below each other as shown in the image.

enter image description here

How to display cols side by side as per bootstrap behaviour ?

bootstrap-4 angular css html
3 Answers

Make sure bootstrap CSS is loaded in the application if not, follow these steps. Steps to include Bootstrap in Application

Pass only car item to the child component, all properties within car object yu will be able to access 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, receive the car object inputs from the parent component. @Input car;

user_9466480

make sure, that bootstrap is included in your bundled.css file.

has '#ads' any styles which override bootstraps behavior?

helpful link for install bootstrap using-bootstrap-with-angular

user_86837220

I had similar problem. I use a bootstrap and a commercial theme built on it. I tried to present list of records in bootstrap grid.

I have main app-component which presents the web page. Then I have card-list component which presents grid list within app-component.

When I typed:

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

Cards were properly styled, but grid didn't work. When I removed styles

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

I lost styling but grid worked fine.

What fixed the problem was to implement another component card-detail and invoke it from card-list. I removed bootstrap CSS from card-list, and added to card-detail.

Finally, I have something like this in card-list component:

<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 this in card-detail:

<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>
user_108839280
Related