Dev Stack Source

Answer : Try the following code: <form layout layout-align="center" layout-padding> <div layout="row" flex> <md-input-container flex class="md-icon-float md-block md-title"> <label>Your font number</label> <!-- below is the material icons --> <md-icon class="material-icons">phone</md-icon> <input type="text"> </md-input-container> <div> <md-button class="md-raised"> <!-- below is the material icons --> <md-icon class="material-icons">search</md-icon> </md-button> </div> </div> </form> see a sample in the following link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000 Would like to provide a contemporary answer to this popular question. 1...

Answer : 1- You should remove the mat-accordion to enable multiple expanded panels. 2- Use the expanded parameter to change multiple states at the same time. Here is a running example. EDIT From version 6.0.0-beta-0 you can use multi parameter and the openAll and closeAll functions : 1- Change the mat-accordion element to set the muti to true and get the MatAccordionComponent instance : <mat-accordion #accordion="matAccordion" [multi]="true"> 2- Then use the openAll and closeAll functions to open or close all panels : <button (click)="accordion.openAll()">Expand All </button> <button (click)="accordion.closeAll()">Collapse All </button> Here is a running example. Source Link For the latest version of Angular material 8 Template <button mat-flat-button color="primary" (click)="openAllPanels()"><b>Open Panels</b></button> &nbsp; ...

Answer : You can just change data of the component instance, like this: this.dialogRef.componentInstance.data = {numbers: value}; Example here: https://stackblitz.com/edit/angular-dialog-update There are 2 ways I can think of at the moment, I don't really like either, but hey... Both ways involve sending an observable to the dialog through the data. You could pass on the observable of the part to the part component, and then pass the observable in the data to the dialog. The dialog could then subscribe to the observable and get the updates that way. AreaComponent @Component({ selector: 'app-area', template: '<app-part *ngFor="let part of planAsync$ | async; i as index" [partData]="part" [part$]="part$(index)"></app-part>' }) export class AreaComponent { plan = []; constructor(private wampService: WampService) { } part$(index) { return this.planAsync$ .map(plan => plan[index]); ...

Answer : I found solution :) It is very very easy but i could't see at first :) only like that : <mat-cell *matCellDef="let element "> {{element[disCol]}} </mat-cell> I must use {{element[disCol]}} only in HTML. Now , everything is ok:) For a full working example based on @mevaka's Where jobDetails$ is the array of items. columns$ is equvilent to Object.keys(jobDetails$[0]) so is just an string[] <table mat-table [dataSource]="jobDetails$ | async"> <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}"> <th mat-header-cell *matHeaderCellDef>{{disCol}}</th> <td mat-cell *matCellDef="let element">{{element[disCol]}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr> <tr mat-row *matRowDef="let row...

Answer : You can use aria-selected="true" attribute from mat-list-option tag to target the selected option, and provide corresponding css properties for the same. mat-list-option[aria-selected="true"] { background: rgba(0, 139, 139, 0.7); } Stackblitz Working Demo The accepted answer works fine, but it uses a hardcoded color value ( background: rgba(0, 139, 139, 0.7) ). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page). So, if you use SCSS, you can use the following code in your component's style file: @import '~@angular/material/theming'; mat-list-option[aria-selected="true"] { background: mat-color($mat-light-theme-background, hover, 0.12); } The above code is adapted from mat-select options - in this way, you will have a consistent look in the entire app: .mat-option.mat-s...

Answer : Add .example-container { overflow-x: scroll; } To the app.component.css to fix the top bar. The bottom will need a similar styling. You can't use width:100% because it is technically outside the table. So it can not pick up the width automatically. I hope this will be help full for others to add Horizontal Scrolling to mat-table and column width according to cell content. .mat-table { overflow-x: scroll; } .mat-cell, .mat-header-cell { word-wrap: initial; display: table-cell; padding: 0px 10px; line-break: unset; width: 100%; white-space: nowrap; overflow: hidden; vertical-align: middle; } .mat-row, .mat-header-row { display: table-row; }

Answer : Content in md-dialog-content is automatically scrollable. You can manually set the size in the call to MdDialog.open let dialogRef = dialog.open(MyComponent, { height: '400px', width: '600px', }); Further documentation / examples for scrolling and sizing: https://material.angular.io/components/dialog/overview Some colors should be determined by your theme. See here for theming docs: https://material.angular.io/guide/theming If you want to override colors and such, use Elmer's technique of just adding the appropriate css. Note that you must have the HTML 5 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 ) There are two ways which we can use to change size of your MatDialog component in angular material 1) From Outside Component Which Call Dialog Component import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material'...

Answer : You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers imports: [ MatDatepickerModule, MatNativeDateModule ], providers: [ MatDatepickerModule, ], Angullar 8,9 import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; Angular 7 and below import { MatDatepickerModule, MatNativeDateModule } from '@angular/material'; You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers imports: [ MatDatepickerModule, MatNativeDateModule ], providers: [ MatDatepickerModule, MatNativeDateModule ], Just import the MatNativeDateModule along with the MatDatepickerModule at the app.module.ts or app-routing.module.ts. @NgModule({ imports: [ MatDatepickerModule, MatNative...

Answer : Simple CSS mat-selection-list { max-height: 400px; overflow: auto; } StackBlitz Demo By setting custom CSS properties? CSS for fancy scroll bar which only supports Chrome browsers: .custom-scroll-bar{ height:70vh; overflow-y:scroll; overflow-x: hidden; } .custom-scroll-bar::-webkit-scrollbar{ width: 5px; } .custom-scroll-bar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.26); } For Firefox and Internet explorer just simply use: .custom-scroll-bar{ height:70vh; overflow-y:scroll; } HTML: <mat-selection-list #shoes class="custom-scroll-bar"> <mat-list-option *ngFor="let shoe of typesOfShoes"> {{shoe}} </mat-list-option> </mat-selection-list> StackBlitz Example You can try with: <mat-card fxFlex="33%"> <mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'"> <mat-list-item ...

Answer : Check this blog https://blog.ninja-squad.com/2019/12/10/angular-localize/ @Component({ template: '{{ title }}' }) export class HomeComponent { title = $localize`You have 10 users`; } And You have to manually add it to your messages.fr.xlf <trans-unit id="6480943972743237078"> <source>You have 10 users</source> <target>Vous avez 10 utilisateurs</target> </trans-unit> don't forgot re serve your angular application. UPDATE FOR ID @Component({ template: '{{ title }}' }) export class HomeComponent { title = $localize`:@@6480943972743237078:`; } https://github.com/angular/angular/blob/252966bcca91ea4deb0e52f1f1d0d3f103f84ccd/packages/localize/init/index.ts#L31 The better way of translationId is: title = $localize`:@@Home.Title:Some title text` and you have to manually add it to your messages.xx.xlf (for example messages.fr.xlf and so on) <trans-unit id="Home.Title...

Answer : Add CSS stylesheet for Material Icons! Add the following to your index.html: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Refer - https://github.com/angular/material2/issues/7948 For Angular 6+: npm install this: npm install material-design-icons add the styles to angular.json: "styles": [ "node_modules/material-design-icons/iconfont/material-icons.css" ] If using SASS you only need to add this line to your main .scss file: @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); If you prefer to avoid fetching icons from google you can also self-host the icons as described in Material Icons Guide: For those looking to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule: @font-face { font-family: '...

Answer : Did you mean a sticky toolbar? Just add a class to the toolbar and make it sticky (using the position attribute set to sticky ): .app-toolbar { position: sticky; position: -webkit-sticky; /* For macOS/iOS Safari */ top: 0; /* Sets the sticky toolbar to be on top */ z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */ } Note: There is no support for position: sticky on IE 11. For more info on browser support for position: sticky , view this caniuse page. You can probably achieve it by setting the style with ::ng-deep: ::ng-deep .mat-toolbar{ z-index: 998; position: fixed } ::ng-deep .mat-tab-group{ margin-top:55px !important; } ::ng-deep .mat-tab-header{ z-index: 999; width:100vw; position: fixed !important; background-color: red !important; } ::ng-deep .mat-tab-body-wrapper{ position: relative !important; margin-top:55px; } DEMO Even i was facing the same issue for my...

Answer : You can use the CSS universal selector ( * ) in your CSS or SCSS : * { font-family: Raleway /* Replace with your custom font */, sans-serif !important; /* Add !important to overwrite all elements */ } Starting from Angular Material v2.0.0-beta.7 , you can customise the typography by creating a typography configuration with the mat-typography-config function and including this config in the angular-material-typography mixin: @import '~@angular/material/theming'; $custom-typography: mat-typography-config( $font-family: 'Raleway' ); @include angular-material-typography($custom-typography); Alternatively ( v2.0.0-beta.10 and up): // NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin: @import '~@angular/material/theming'; $custom-typography: mat-typography-config( $font-family: 'Raleway' ); @include mat-core($custom-typography); Refer to Angular Material's typography documentation for more ...

Answer : Use the following css: ::ng-deep .mat-list .mat-list-item .mat-line{ word-wrap: break-word; white-space: pre-wrap; } or ::ng-deep .mat-line{ word-wrap: break-word !important; white-space: pre-wrap !important; } Height of mat-list-item is limited to 48px so we need to override in case of large text ::ng-deep .mat-list .mat-list-item{ height:initial!important; } Demo:https://plnkr.co/edit/tTlhYgTkSz1QcgqjCfqh?p=preview Link to know more about the word-wrap and white-spac Simply wrap your whole paragraph inside of <mat-list-item> with <p> tags and that will force correct styles. Makes sense... No need for styles in this case. <mat-list-item> <p> My super long text.......... </p> </mat-list-item> I created this css/scss class. /* CSS */ .mat-list-item.mat-list-item-word-wrap { height: initial !important; } .mat-list-item-word-wrap .mat-line { word-wrap: break-word !imp...

Answer : You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version. HTML: <mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)"> <mat-grid-tile>1</mat-grid-tile> <mat-grid-tile>2</mat-grid-tile> <mat-grid-tile>3</mat-grid-tile> <mat-grid-tile>4</mat-grid-tile> <mat-grid-tile>5</mat-grid-tile> <mat-grid-tile>6</mat-grid-tile> </mat-grid-list> TS: ngOnInit() { this.breakpoint = (window.innerWidth <= 400) ? 1 : 6; } onResize(event) { this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6; } Stackblitz demo here Hope this helps! I liked Altus answer, but I would like to have more breakpoints. So I've created a simple method with some breakpoints using F...

Answer : assuming you are using latest stable version of material 2, you can use floatLabel="never" to force label to not to float. here is live working demo this is clear in documentation https://material.angular.io/components/form-field/api <form class="search-form"> <mat-form-field class="example-full-width" appearance="standard"> <input class="toolbar-search" type="text" matInput> <mat-placeholder>Search</mat-placeholder> <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon> </mat-form-field> </form> Please set the appearance of mat-form-field to standard and the placeholder will stop behaving like label. Explanation : By default the mat-label in mat-form-field floats and the appearance of mat-form-field is "legacy". That means if a mat-label is not present with the form field then placeholder will start behavin...

Answer : Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper . Also, MatStepper exposes public methods next() and previous() . You can use them to move back and forth. In your template: Add an id to your stepper e.g. #stepper . Then in your goBack() and goForward() methods, pass the stepper id: <mat-horizontal-stepper #stepper> <!-- Steps --> </mat-horizontal-stepper> <!-- second option --> <div> <button (click)="goBack(stepper)" type="button">Back</button> <button (click)="goForward(stepper)" type="button">Next</button> </div> .. and in your typescript: import { MatStepper } from '@angular/material/stepper'; goBack(stepper: MatStepper){ stepper.previous(); } goForward(stepper: MatStepper){ stepper.next(); } Link to stackblitz demo . You can also use ViewChild to get a reference to ...

Answer : Sorry for being late to the party. I'm really horrified of reading all answers above... The solution is much easier and direct than any of the proposed answers, as the select component just passes the selected model as part of the selectionChange argument. But first, some corrections to your example. You've declared an interface, so USE IT: export interface FamilyRelation { id: number; type: string; } So, in your constructor: constructor() { this.familyRelationArray=[ { id: 1, type: 'Parent' }, { id: 2, type: 'Sister' } ] } and not what you put in your StackBlitz... Then your view will become this: <mat-select (selectionChange)="onChange($event)" id="family_relation" placeholder="Family Relation"> <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.id"> {{familyRelation.typ...

Answer : After upgrading to Angular 9 (released today), I ran into this issue as well and found that they made the breaking change mentioned in the answer. I can't find a reason for why they made this change. I have a material.module.ts file that I import / export all the material components (not the most efficient, but useful for quick development). I went through and updated all my imports to the individual material folders, although an index.ts barrel might be better. Again, not sure why they made this change, but I'm guessing it has to do with tree-shaking efficiencies. Including my material.module.ts below in case it helps anyone, it's inspired off other material modules I've found: NOTE : As other blog posts have mentioned and from my personal experience, be careful when using a shared module like below. I have 5~ different feature modules (lazy loaded) in my app that I imported my material module into. Out of curiosity, I stopped using the shared module and...

Answer : You can use ::ng-deep selector to achieve what you want, this answer has some info on it. How I did it: CSS ::ng-deep .mat-progress-bar-fill::after { background-color: #1E457C; } ::ng-deep .mat-progress-bar-buffer { background: #E4E8EB; } ::ng-deep .mat-progress-bar { border-radius: 2px; } HTML <mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar> And the result is this: EDIT: I found a way to avoid using ::ng-deep as it will be removed from angular soon. It seems that if you move your style from your component.css file to the global styles.css file it will work without ::ng-deep . So, a style defined above can change in mat-progress-bar .mat-progress-bar-buffer { background: #E4E8EB; } Move it to styles.css and it will be applied like this: LATER EDIT As an explanation why setting styles in the global style sheet works: For components the default is that angul...