I have started to learn angular with asp.net and when trying to create cards to show some items I get the box with width 100%
.html:
<div class="row">
<div class="card">
<img class="propImage" src="assets/images/default_house.png">
<div class="card-body p-1">
<h1>{{ Property.Name }}</h1>
<h2>{{ Property.Type }}</h2>
<h3>{{ Property.Price }}</h3>
</div>
</div>
<div class="card">
<img class="propImage" src="assets/images/default_house.png">
<div class="card-body p-1">
<h1>{{ Property2.Name }}</h1>
<h2>{{ Property2.Type }}</h2>
<h3>{{ Property2.Price }}</h3>
</div>
</div>
</div>
and the componenemts:
import { Component } from '@angular/core';
@Component({
selector: 'app-property-card',
//template: '<h1>This is my card!</h1>',
templateUrl: 'property-card.component.html',
//styles: ['h1 {font-weight: normal;}']
styleUrls: ['property-card.component.css']
})
export class PropertycardComponent
{
Property: any = {
"id":1,
"Name": "Rami Wahdan",
"Type":"House",
"Price": 120000
}
Property2: any = {
"id":1,
"Name": "Fatima Habib",
"Type":"House",
"Price": 150000
}
}
and here is a reference for the bootstrap:
{
"name": "my-first-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"bootstrap": "^5.3.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},