How to add menu at the top right of the card using angular material, as per the https://material.angular.io/components/card/overview document there is no tag for that.
I want to add a button with icon at the right top as shown in the picture
<mat-card class="custome-card">
<a [routerLink]="['/products/123']">
<img mat-card-image
src="https://wonderfulengineering.com/wp-content/uploads/2013/12/Lamborghini-wallpaper-14.jpg"
alt="Photo of a Shiba Inu">
</a>
<mat-card-content>
<a [routerLink]="['/products/123']" class="productDetail"><span
class="mat-subheading-2">Lamborghini Aventador</span></a><br>
<span>NRs 1 - 2 Crore</span><br>
<strong>Size: </strong> <span>XL L M S XS</span>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" fxLayoutAlign="center">
<falcon-button [field]="favoriteBtnConfig"></falcon-button>
<falcon-button [field]="shareBtnConfig"></falcon-button>
<falcon-button [field]="shopCartBtnConfig"></falcon-button>
</div>
</mat-card-actions>
</mat-card>
The above code create the image as below
This solve the issue
.mdl-card__menu {
position: absolute;
right: 16px;
top: 16px;
}
Related
I am rendering a list of asdfasd in Angular, but the images I upload are of different sizes, which causes some asdfasd to be bigger than others. How to make them the same size?
Here is the HTML
<div class="cardList">
<ng-container *ngFor="let card of comics">
<mat-card class="example-card">
<mat-card-content>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{card.name}}</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="card.picture">
<mat-card-content>
<p>
{{card.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click) = "openDialog(card)">${{card.amount}}</button>
</mat-card-actions>
</mat-card-content>
</mat-card>
</ng-container>
</div>
<mat-divider></mat-divider>
Try with this
mat-card img{
object-fit: cover; /*this makes the image in src fit to the size specified below*/
width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
height: 80%;
}
Reference
As a personal project, I'm building a website using angular for one of my buddies. It may or may not ever go live, but I'm doing the project for my own personal learning. I've been a web app tester for the past five years, but only developed in a handful of situations, so I apologize if I'm incredibly naive or inexperienced.
I have a series of mat-card's that I'm putting information about centres around my province in (address, phone number, etc.) and I want to include each centre's logo/image as the mat-card-avatar. Right now, I have this:
My HTMLis here:
<mat-card class="centres-card" *ngFor="let centre of centres">
<mat-card-header fxLayout fxLayoutAlign="start center">
<div mat-card-avatar>
<img class="avatar" src="{{centre.img}}">
</div>
<mat-card-title>{{centre.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{centre.streetAddress}}
<br>
{{centre.city}}, {{centre.province}}
<br>
{{centre.postalCode}}
</p>
</mat-card-content>
</mat-card>
</div>
My question is, I don't understand why both the header text and content text are overlapping the image, and not being pushed down by it.
Thanks so much for the help.
There are two options to get what you're looking for:
Option 1: use a div with mat-card-avatar and set the background
from you TS array
Option 2: use an img with mat-card-avatar ad set
the source
You were putting <img> inside the div with mat-card-avatar...
relevant HTML:
<h2>Option 1</h2>
<div *ngFor="let centre of centres">
<mat-card class="centres-card">
<mat-card-header fxLayout fxLayoutAlign="start center">
<div mat-card-avatar class="example-header-image"
[ngStyle]="{'background-image': 'url(' + centre.img + ')'}">
</div>
<mat-card-title>{{centre.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{centre.streetAddress}}
<br>
{{centre.city}}, {{centre.province}}
<br>
{{centre.postalCode}}
</p>
</mat-card-content>
</mat-card>
</div>
<h2>Option 2</h2>
<div *ngFor="let centre of centres">
<mat-card class="centres-card">
<mat-card-header fxLayout fxLayoutAlign="start center">
<img mat-card-avatar src="{{centre.img}}">
<mat-card-title>{{centre.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
{{centre.streetAddress}}
<br>
{{centre.city}}, {{centre.province}}
<br>
{{centre.postalCode}}
</p>
</mat-card-content>
</mat-card>
</div>
relevant CSS:
.example-header-image {
background-size: cover;
}
working stackblitz here
I want to have 2 angular material cards next to each other but I don't know how.
HTML
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<app-card></app-card>
<app-card></app-card>
</mat-card>
At the moment the second one is under the first one.
Try below CSS:
display: inline-block;
HTML Code:
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<mat-card class="inline-block">
Part 1
</mat-card>
<mat-card class="inline-block">
Part 2
</mat-card>
</mat-card>
CSS:
.inline-block {
display: inline-block;
}
Working_Demo
I'm generating cards from an Api when user makes a search.
I have film list component in which I show my cards
here's the HTML
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results">
<mat-card>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
And CSS
.example-card {
min-width: 100%;
margin: 40px;
}
.cards {
width: 400px;
}
the services are working and also component ts logic.
My problem is that material cards are not wrapping to a new line while I'm using fxLayoutWrap to wrap content when fxFlex get 100 of value.
Here's a stacklitz demo ( I get an https error when I call the API, if someone could fix it I'll be grateful )
Here's a screenshot of my problem
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card">
<mat-card *ngFor="let film of dataResult.results" style="margin-top:10px;>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
Because there is no problem repeating the code, you must be sure to place the repeat command as well as the essence of the code in the smart design material, and the codes are merged in the absence of space, so they must be separated for them Write css style margin-top:10px.
Verify the code above for you.
the fxLayout attribute can take a second parameter "wrap" which will do what you're looking for.
<div fxLayout="row wrap"></div>
I have an Angular 5 project and on the toolbar I have the following details:
Sub-menu button
Company logo
Company name
These three are fine but now I am being asked to display the following details to the right of the main menu
Person icon
Logged in username
Below is the following code in the app.component.html file
<mat-sidenav-container>
<mat-sidenav #sidenav mode="over" opened="false">
<div class="closeButton">
<mat-icon (click)="sidenav.toggle()" title="Click to close sub-menu.">clear</mat-icon>
</div>
<a>Sidenav content</a>
<a>This is a really long nameeeeee</a>
<a>Sidenav content</a>
</mat-sidenav>
<mat-toolbar>
<mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open sub-menu.">reorder</mat-icon>
<img src="./assets/images/Crest.jpg">AJ Bell Information Interface
<span flex></span>
<div style="font-size: 15px">
<mat-icon style="font-size: 25px">person</mat-icon>
USERNAME
</div>
</mat-toolbar>
</mat-sidenav-container>
<router-outlet>
<div>this</div>
<div>is</div>
<div>the</div>
<div>main</div>
<div>body</div>
</router-outlet>
As you can see I have tried using <span flex></span> and also float: right etc but with no joy at all.
I know it will be simple but I'm having coding tunnel and cant think of a solution
You can use flex: 1 1 auto;
Have a look at this example