angular-material2

In Angular-4 I am setting progress spinner like that <md-progress-spinner [color]="color" [mode]="mode" [value]="value" aria-label="Rating">Rating</md-progress-spinner> and the values in ts: color = 'warn'; mode = 'determinate'; value = 50; showText='Rating'; But I want to set some text inside the progress bar, I try to use angular-2 method but its not working in Angular-4 can anybody please tell me how its done in Angular-4 Angular-2 approach is to set [showText]='showText' This feature in not available in Material. You need to create it manually. You can place the <mat-progress-spinner>

I am using Angular Material 2 Autocomplete in my Angular 4 project. How can I implement such that the autocomplete values are loading from an HTTP call, in this example ? Can anyone give me a Plunker demo? Thank you First of all, you should please show some attempt to solve your issue, but luckily I'm bored and will provide an answer ;) Here in this sample I'm using: https://jsonplaceholder.typicode.com/users we store that JSON result as an observable in users . Then we have our observable filteredUsers which will be shown in template. Since this is a http-request, we would want to use

I'm trying to use my custom theme in my angular project. It's not working as expected, I get the following error: ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/custom_theme.scss Module not found: Error: Can't resolve '@angular/material/theming' in '/Users/mathiasschrooten/Downloads/skylux-admin/src' My styles.css file: @import "custom_theme.scss" .mat-tab-label { flex: 1 1 auto; } My custom_theme.scss file: @import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-orange); $candy-app

I want to check when my <md-sidenav> is getting closed. Is there a way to use the EventEmitter onClose of my sidenav object to check that? and can you give me an example? This is possible in 2 different ways - via the template, and within the component code itself. Assuming an HTML template such as the following: <md-sidenav-container> <md-sidenav #mySidenav (close)="onClose()" mode="side"> This is sidenav content </md-sidenav> <button md-raised-button (click)="mySidenav.toggle()">Toggle Sidenav</button> </md-sidenav-container> In your component you can have something like this: import {

I have a input component from angular material: <input mdInput placeholder="Name" disabled floatPlaceholder="never"> I have two issue: How do I change the underline to bold from dotted when in disabled state? I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select ). 1. How do I change the underline to bold from dotted when in disabled state? Use ViewEncapsulation to override default styles with your custom styles. In your component.css , add the following styles: .mat-form

https://stackblitz.com/edit/angular-material2-issue-1vt6en?file=app/app.component.html Please check tab two it is not expanded properly. How to fix it. Firstly, consider updating your Angular dependencies to 6.x.x , where Angular Material has support for lazy-loading of tab content. From the docs for tabs : By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated. If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it