I am working on a project with an angular frontend and I am trying to add a shadow to one of my components and have read that class="mat-elevation-z8" should do the trick. However, it does not do anything.
My html :
<mat-card class="mat-elevation-z8" style="height: 400px; width: 400px;">
<mat-card-header>
<mat-card-title *ngIf="message">{{(message.title | truncateword: 25) | slice:0:30}}</mat-card-title>
<mat-card-subtitle *ngIf="message">{{message.publishedAt | date}}</mat-card-subtitle>
</mat-card-header>
<img *ngIf="image" [src]="image" alt="Here might be a preview image" mat-card-image>
<mat-card-content>
<p *ngIf="message">
{{(message.summary | truncateword:70 | slice:0:73)}}
</p>
</mat-card-content>
</mat-card>
Also, I am importing ~#angular/material/theming in my styles.css, so that should not be the problem either. Here is the styles in my angular.json:
"styles": [
"./node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
Any ideas?
You should try on :
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
Angular material mat card shadow can be toggled using [class.mat-elevation-z8] attribute
<mat-card [class.mat-elevation-z8]="false">
Example
</mat-card>
Related
<mat-grid-list cols="3", rowHeight="4:3" >
<mat-grid-tile *ngFor="let itemCard of itemCards">
<!--<ul>-->
<!-- <li *ngFor="let itemCard of itemCards">-->
<mat-card class="card">
<mat-card-header>
<div mat-card-avatar class=""></div>
<mat-card-title>
{{itemCard.brand}}
</mat-card-title>
<img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-subtitle>
{{itemCard.model}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{itemCards}}
{{itemCard.descriere}}
</p>
<div>Price {{itemCard.price}}</div>
<div>Size {{itemCard.size}}</div>
</mat-card-content>
<mat-card-actions>
<button mat-button>Add to Cart</button>
<!-- <button mat-button>Favorites</button>-->
</mat-card-actions>
</mat-card>
<!-- </li>-->
<!--</ul>-->
</mat-grid-tile>
</mat-grid-list>
Hello, I create a mat-card template and I'm trying to display data from backend into a mat-grid-list with cards as you can see in the code from above and i get this Error : "main.ts:11 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name." I dont'know how to repair this please help me. I mention that i try the exact same thing but i use as you can see commented in the code and it worked but with grid list don't.
there is comma in between the attributes
<mat-grid-list cols="3", rowHeight="4:3" >
// should be
<mat-grid-list cols="3" rowHeight="4:3" >
I have a <mat-drawer-container> that contains a <mat-selection-list>. Whenever the <mat-selection-list> has enough elements to overflow, the scrolling is not starting at the top when the elements are rendered. It's starting at the first element in the list, which hides the title and subtitle. Is there a way to force the scroll to start and the top?
[edit] I'm aware that I could leverage something like a scrollTo(), but it seems hack-y, and I'm trying to determine the best-practice approach for this.
<mat-drawer-container class="container">
<mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
<p class="drawer-title">Data Validation</p>
<p class="drawer-subtitle">{{integrationName}}</p>
<mat-selection-list [multiple]="false">
<mat-list-option (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates">
{{date}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
</mat-drawer>
</mat-drawer-container>
<mat-selection-list> kind of pseudo-selects the first item in the collection of <mat-list-option>'s. This can be disabled by defaulting all of [selected] Input()'s to false
The fix was put in place like so:
<mat-drawer-container class="container">
<mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
<p class="drawer-title">Data Validation</p>
<p class="drawer-subtitle">{{integrationName}}</p>
<mat-selection-list [multiple]="false">
<!--here--> <mat-list-option [selected]="false" (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates">
{{date}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
</mat-drawer>
</mat-drawer-container>
I am trying to display an avatar for each object that I have. The object is located in a MongoDB database and it is also displayed one by one. The problem that I have is that if I display the images as I display the objects (let's say I have 3 objects displayed), it shows all the 3 avatars for each object displayed, not just one image for each object. This is my code:
<ng-container *ngFor="let e of InstructorData">
<mat-card class="example-card" *ngIf="e.slope === 'Sinaia'">
<mat-card-header>
<div mat-card-avatar class="margin" *ngFor="let avatar of imagesData1">
<img class="example-header-image" mat-card-image [src]="avatar" >
</div>
<mat-card-title>{{e.name}} {{e.surname}}</mat-card-title>
<mat-card-subtitle>{{e.phoneNumber}}</mat-card-subtitle>
<mat-card-subtitle>{{e.email}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{e.description}}</p>
</mat-card-content>
</mat-card>
</ng-container>
imagesData1: any = [
"./assets/img/ski1.jpg",
"./assets/img/ski2.jpg",
"./assets/img/ski3.jpg"
];
You need to modify your code to below you don't need to iterate over all the images just fetch the image according parent loop key it will always print single image
<ng-container *ngFor="let e of InstructorData; let key = index">
<mat-card class="example-card" *ngIf="e.slope === 'Sinaia'">
<mat-card-header>
<div mat-card-avatar class="margin">
<img class="example-header-image" mat-card-image [src]="imagesData1[key]" >
</div>
<mat-card-title>{{e.name}} {{e.surname}}</mat-card-title>
<mat-card-subtitle>{{e.phoneNumber}}</mat-card-subtitle>
<mat-card-subtitle>{{e.email}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{e.description}}</p>
</mat-card-content>
</mat-card>
</ng-container>
I have a mat-card that essentially has two columns inside of it; one column for displaying the image and the other for the mat-card contents. I currently set the two columns widths to half of their containers width to equally space them inside of the mat-card.
I am trying to modify my html code so that if the returned image path is empty, the mat-card contents occupy the entire width of the mat-card. I've tried doing so using the [ngClass] below but couldn't get it to work.
Is there an alternate way of doing this?
Below is my html code, I set the width of the two columns to half their containers width in the css file.
<mat-card class="mat-elevation-z1" id="card-div" >
<div class="img-container" *ngIf="blog.imagePath != ''" [ngClass]="blog.imagePath === '' ? 'width': '0%'">
<img [src]="blog.imagePath" [alt]="">
</div>
<div class="card-content" [ngClass]="blog.imagePath === '' ? 'width': '80%'">
<mat-card-header>
<mat-card-title> {{ blog.title }}</mat-card-title>
<mat-card-subtitle>
Published: {{blog.dateCreated}} <br>
Author: {{blog.author}}
</mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
<p >{{ blog.content }}</p>
<mat-action-row >
<button mat-raised-button *ngIf="adminIsAuthenticated" (click)="onDelete(blog.blogId)">Delete</button>
<button mat-raised-button *ngIf="adminIsAuthenticated" [routerLink]="['/edit', blog.blogId]">Edit</button>
<button mat-raised-button >Read More</button>
</mat-action-row>
</mat-card-content>
</div>
</mat-card>
The [ngClass] helps you to add some CSS classes to an element, while in your code you are trying to add width property that is set to 80%.
If you wanna use a [ngClass] then you can write it like so
[ngClass]="{ yourClassName: blog.imagePath === ''}"
and in CSS or SCSS file specify this class like so
.yourClassName {
width: 80%;
}
I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"