I do an api call to get data from The Movie Database.
I then want to display the data using the bootstrap grid system.
This is what it currently looks like using Angular Material Grid:
<mat-grid-list cols="5" rowHeight="2:3" gutterSize="10px">
<div *ngFor="let movie of movies.results">
<mat-grid-tile>
<mat-card>
<div
class="thumbnail"
[style.background-image]="getSafeStyle(movie.poster_path)"
>
-- id: {{ movie.id }} -- name: {{ movie.title }}
</div>
</mat-card>
</mat-grid-tile>
</div>
</mat-grid-list>
the problem starts when I change to mobile view.
Angular material's grid system doesn't resize the elements like Bootstrap would.
I am trying to change it to bootstrap but I do not know how assign column sizes and rows to elements because the results being returned can always change.
So basically what I'm trying to achieve is something like this but inside an ngFor
<div class="row">
<div class="col-md-4">
API RESULT
</div>
<div class="col-md-4">
API RESULT
</div>
<div class="col-md-4">
API RESULT
</div>
</div>
and if there are too many values returned to fit in one row, a whole new row is created with the same amount of columns.
Does anybody know how to achieve this?
Thanks in advance for taking the time to read and trying to help :)
Something like
<div class="row">
<div *ngFor="let movie of movies.results" class="col-xl-2 col-lg-3 col-md-4 col-sm-12">
<!-- contents here -->
Bootstrap classes for the columns arbitrary, pick what looks good dependent on the resolution.
Related
I'm trying to close and open a new div in a ng-template element. When I try this my code breaks.
<div class="row">
<ng-template ngFor let-i="index" let-data [ngForOf]="dataArray">
<app-user-dashboard-gauge [gaugeData]="data" class="col"></app-user-dashboard-gauge>
<ng-template [ngIf]="i === 3">
</div>
<div class="row">
</ng-template>
</ng-template>
</div>
I'm trying to do this inside a ngFor to preserve my bootstrap rows. Does anyone know how to fix this or maybe another solution?
Edit: Ok I think I want that clear on what I wanted to happen. I update my code block and will try to explain it better. On the third iteration of my for loop I want the row div to be closed and a new one to open. And the rest of the <app-user-dashboard-gauge> to go in the second row div.
Okay I fixed it. It might not be the best or the nicest looking but i split the incomming data into two parts and made another for loop for the secend group of data.
<div style="background-color: #202020">
<div class="row">
<ng-template ngFor let-data [ngForOf]="dataArray1">
<app-user-dashboard-gauge [gaugeData]="data" class="col"></app-user-dashboard-gauge>
</ng-template>
</div>
<div class="row">
<ng-template ngFor let-data [ngForOf]="dataArray2">
<app-user-dashboard-gauge [gaugeData]="data" class="col"></app-user-dashboard-gauge>
</ng-template>
</div>
</div>
Im still open for feedback if someone knows a better solution but this fix will suffice for now.
<ng-container *ngIf="i !== 3">
<div class="row">
</div>
</ng-container>
In my project I'm using a mat-dialog to display a description of an object. The objects are generated through ngFor, like this:
<mat-card id="CARDBOX" *ngFor="let box of box">
<img class="logoy" src="{{box.image}}" height=35px>
{{box.button_name}}
<input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
</mat-card>
It's a basic card object that has an info icon that when clicked, opens the dialog, which looks like this:
<title mat-dialog-title></title>
<div mat-dialog-content *ngFor="let box of box">
{{box.description}}
</div>
<div mat-dialog-action>
<button mat-button (click)="onNoClick()">Close</button>
</div>
This works. However, it is displaying EVERY description in box, rather than just the corresponding one. I know this is because of the ngFor running through every item. Is there a way so that it will only display the one correct description, perhaps through use of some kind of conditional? I would ideally like to keep everything as abstracted as possible, I figured using some kind of conditional in the HTML would make the most sense but I'm not sure if that exists? Please let me know if you need more detail.
<div mat-dialog-content *ngFor="let box of box">
{{box.description}}
</div>
Your ngFor directive is looping through with an element whose name (and thus its reference if I'm not making a mistake here) is equal to its container.
Have you tried this?
<div mat-dialog-content *ngFor="let boxEl of box">
{{boxEl.description}}
</div>
Your code might not be able to differentiate a "box" (element) from a "box" iterable.
I am working on a project that has and Angular 10 front end and a Dot Net Core 3.1 API.
When debugging/developing the system, one the screens displays a model property, a string called name, correctly.
However, whenever I run ng build --prod the same screen cuts off the property value. Each value returned appears to have the last 7 characters missing.
The code for the HTML is below:
<div *ngFor="let item of versionDocItems">
<div class="form-group">
<div class="row">
<div class="col pt-1 filterName ml-3 align-self-center">
{{item.name | titlecase}}
</div>
<div class="col-2">
<button class="btn blue backButton filterButton" (click)="download(item.itemFileId)" type="submit" name="applyFilter">Download</button>
</div>
</div>
</div>
</div>
The CSS seems to be fine and shows that there is plenty of space left for the property to show.
Also when I have used console.log to return property values they are returning correctly.
Any help would be greatly appreciated
This question might sound dumb, but I'll try it anyways:
Is it possible to use a component multiple times, but with different content? Something like a template.
To be exact, I want to write the component only once, but then use it in different places with different content - e.g. (I don't know whether that makes any sense and if so, how to realize it) by getting some text from an allocated model to fill a div, so that I can solely add a further model instead of editing the component itself?
Make use of the <ng-content>. Illustration:
app.component.html
<my-component>
<p>I'm getting projected into a component from outside because of ng-content</p>
</my-component>
my.component.html
<p>Data from my own component</p>
<ng-content></ng-content>
<p>Data from my own component</p>
By use of the <ng-content> you can project data from outside to within your component. You can make use of this in multiple ways, without changing the original component.
One way you can pass data to a component using input.
<my-component [text]="myText"></my-component>
And then in the component you can get the text using:
#Input() text: Person;
And display it in your template
You can use ng-content for this. Please find the below pseudo code
<!-- card.component.html -->
<div class="card">
<div class="card-header">
{{ header }}
</div>
<!-- add the select attribute to ng-content -->
<ng-content select="[card-body]"></ng-content>
<div class="card-footer">
{{ footer }}
</div>
</div>
<!-- app.component.html -->
<h1>APP COMPONENT</h1>
<card header="my header" footer="my footer">
<div class="card-block" card-body><!-- We add the card-body attribute here -->
<h4 class="card-title">You can put any content here</h4>
<p class="card-text">For example this line of text and</p>
This button
</div>
<card>
I'm new to Angular, Bootstrap and front-end programming.
I'd like to create several boxes.
After clicking on the box, detailed view of it should display above all boxes section.
This is what I'm trying to create:
and then after clicking on box number 1:
But now it looks like this:
I'm creating these boxes via Angular *ngFor loop like this:
<div class="container text-center" id="cryptocontainer">
<div class="row" *ngIf="coins">
<div *ngFor="let coin of objectKeys(coins); let i = index" id="currencybox" class="col-md-2" (click)="coinDetails(coin,i)">
<img id="image" [src]="getImage(coin)" class="img-responsive">
<div class="cryptoname">{{ coin }}</div>
<div class="cryptoprice">{{ coins[coin].USD | currency:'USD':true}}</div>
<div class="details" *ngIf="detailToggle[i]" no-lines>
<div class="row">
<div class="col">
<div class="label">CHANGE(30 dni)</div>
<canvas id="canvas{{i}}">{{ chart[i] }}</canvas>
</div>
</div>
<div class="row" id="details">
<div class="col-sm">
<div class="label">MARKET CAP</div>
<div class="answer">{{details.MKTCAP}}</div>
</div>
<div class="col-sm">
<div class="label">CHANGE(24h)</div>
<div class="answer">{{ details.CHANGE24HOUR }} ({{ details.CHANGEPCT24HOUR }}%)</div>
</div>
<div class="col-sm">
<div class="label">MAX (24h)</div>
<div class="answer">{{ details.HIGH24HOUR }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's difficult to answer specifically without seeing your component code, but what you are probably missing, conceptually, is an understanding of how to break a UI like this into components and then pass data between those components in the "Angular" way. There are several ways to attack this. Ideally, I think you would move the details div to a separate component that has an input that receives the details, then create a separate component for the clickable divs that have an output that fires a custom event when clicked. These would both be instantiated in the template of a parent component, which would hold the current state of the clicked detail.
So, when you click a clickable component, it passes its details data back up to the parent, where it's set on the details property. Since the input on the display/canvas component is bound to that property, angular change detection will handle updating that component for you.
Here is a stackblitz with a simplified example of the communication pattern I am describing. You could also do something like create a shared service that you inject into both and then update that when a component is clicked.
https://angular-azmcxt.stackblitz.io
Stackblitz Editor Link