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

Question

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.

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

Answer 1

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;