Newbe Dev Stack

Answer : Based on the excellent answer of (from zero to hero), I want to clarify 2 points mentioned in comments: 1- You have to use ngModel not value 2- You have to give the control a name Full credit goes to him, I wanted to clarify this to any newcomer like me as it took me 2 hours to find out why it doesn't work You added required to the select's option , not the select . Do it like: <mat-form-field> <mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required> <mat-option *ngFor="let food of foods" [value]="food.value" > {{ food.viewValue }} </mat-option> </mat-select> </mat-form-field> DEMO

Answer : The solution that I found to this problem is to use completed attribute of step. Refer to the line of code given below: <mat-step [completed]="isCompleted"> When isCompleted is true it will enable the next step. Note: For this to work, the stepper component must be in the linear mode. This can be done by setting the attribute linear on the stepper component, like <mat-horizontal-stepper linear> Check this link . You need to use linear stepper. A stepper marked as linear requires the user to complete previous steps before proceeding. For each step, the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. Example shown as below import { Component, Input } from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {MatIconRegistry} from '@angular/material'; @Component({ selector: 'stepper', te...

Answer : It seems that library styles override your css inline declaration. Try maybe to add !important declaration to your style: style="font-size: 16 !important" or since you didn't provide more code, try to inspect this icon node, to check which style define the font-size. Also check here UPDATE : Here is another possibly working solution. Add transform: scale(2); style for svg element you want to resize, where 2 is 200% of actual size (of course you can also downsize them using for example 0.5 value for 50%). Here is working sample for the website with your icons and link to documnetation: .size-24 button svg { width: 24px; height: 24px; transform: scale(2); } I played with this for way too long. I have a series of icons that I want to be scaled to fit in various mat-icon sizes, but each icon needs a different scale so they appear balanced with the other icons - effectively increasing the size of the viewBox. In the end this worked well...

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 : 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 : Use a binding for the value in your template. value="{{ option.id }}" should be [value]="option.id" And in your selected value use ngModel instead of value . <mat-select [(value)]="selected2"> should be <mat-select [(ngModel)]="selected2"> Complete code: <div> <mat-select [(ngModel)]="selected2"> <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option> </mat-select> </div> On a side note as of version 2.0.0-beta.12 the material select now accepts a mat-form-field element as the parent element so it is consistent with the other material input controls. Replace the div element with mat-form-field element after you upgrade. <mat-form-field> <mat-select [(ngModel)]="selected2"> <mat-option *ngFor="let option of options2" [value]="option.id...

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 : The grid tile component sets top padding dynamically on the element itself, so you need to use the !important modifier in your CSS to override it. HTML: <mat-grid-tile class="my-grid-tile"></mat-grid-tile> CSS: .my-grid-tile { padding-top: 24px !important; } Setting rowHeight of mat-grid-list works for me, the G. Tranter doesn't work because the mat-grid-list has a padding It's set dynamically too and cannot be setted with !important. <!-- 70px to prevent hide floatLabel in matInput --> <mat-grid-list cols="2" rowHeight="70px"> <mat-grid-tile> <!-- your controls --> </mat-grid-tile> </mat-grid-list> Ref: https://material.angular.io/components/grid-list/examples "@angular/material": "^6.4.3" "@angular/core": "^6.1.0" To get rid of the padding on top of mat grid tile restrict the height of the mat grid tile usi...

Answer : You can either set with ngModel either with [checked] attribute. ngModel binded property should be set to 'true': 1. <mat-checkbox class = "example-margin" [(ngModel)] = "myModel"> <label>Printer </label> </mat-checkbox> 2. <mat-checkbox [checked]= "myModel" class = "example-margin" > <label>Printer </label> </mat-checkbox> 3. <mat-checkbox [ngModel]="myModel" class="example-margin"> <label>Printer </label> </mat-checkbox> DEMO this works for me in Angular 7 // in component.ts checked: boolean = true; changeValue(value) { this.checked = !value; } // in component.html <mat-checkbox value="checked" (click)="changeValue(checked)" color="primary"> some Label </mat-checkbox> I hope help someone ... greetings. let me know if someone have some easiest ...

Answer : Add to your app module imports: ScrollDispatchModule . Add cdkScrollable to your mat-sidenav-content : <mat-sidenav-content cdkScrollable> </mat-sidenav-content> In your root component: a) inject ScrollDispatcher from @angular/cdk/overlay and subscribe to scrolling: constructor(public scroll: ScrollDispatcher) { this.scrollingSubscription = this.scroll .scrolled() .subscribe((data: CdkScrollable) => { this.onWindowScroll(data); }); } c) do something when scrolling, e.g. check the offset private onWindowScroll(data: CdkScrollable) { const scrollTop = data.getElementRef().nativeElement.scrollTop || 0; if (this.lastOffset > scrollTop) { // console.log('Show toolbar'); } else if (scrollTop < 10) { // console.log('Show toolbar'); } else if (scrollTop > 100) { // console.log('Hide toolbar'); } this.lastOffset = scrollTop; } D...

Answer : In your component, set ViewEncapsulation to None and add the styles in your component.css file. Changes in Typescript code: import {Component, ViewEncapsulation} from '@angular/core'; @Component({ .... encapsulation: ViewEncapsulation.None }) Component CSS: /* Styles for tab labels */ .mat-tab-label { min-width: 25px !important; padding: 5px; background-color: transparent; color: red; font-weight: 700; } /* Styles for the active tab label */ .mat-tab-label.mat-tab-label-active { min-width: 25px !important; padding: 5px; background-color: transparent; color: red; font-weight: 700; } /* Styles for the ink bar */ .mat-ink-bar { background-color: green; } Demo Update To customize tab background and ink bar, you can define your own theme then use the theme options on the tab group: <div class="my-theme"> <mat-tab-group [backgroundColor]="'primary'" [color]="...

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 : I'll give you the basics. In Angular Material (for Angular 2/4) the most commonly used attributes are: fxLayout="row | column" fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time) fxFlex="number" (can accept numbers from 1 to 100) You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution. For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs

Answer : This doesn't work because it is triggered by mouseenter event which doesn't get fired by most browsers for disabled elements. A workaround is to add matTooltip to a parent element: <div matTooltip="You cannot delete that" [matTooltipDisabled]="!isButtonDisabled()"> <button mat-raised-button [disabled]="isButtonDisabled()"> <mat-icon>delete</mat-icon> </button> </div> The example above assumes that there is a method for determining if the button should be enabled or not. By using matTooltipDisabled the tooltip will be shown only if the button is disabled. References: https://github.com/angular/material2/issues/5040 https://github.com/angular/material2/issues/7953 I had a similar issue while displaying tooltip on a disabled icon button. The given solution was not practical for me, because adding an additional div on top of the button, messed up the layout of the button rel...

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 ...