AngularJS Material: Material Design component library for AngularJS (1.x). Use angular/material2 channel for Angular Material (v2+).
they use a dependency
screenfull that applies the HTML5 spec to full screen the image.this kind of sounds like what you want.
@masber_twitter looking at this:
https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-vertical.html
and
https://github.com/angular/material2/blob/master/src/cdk/stepper/stepper.ts
looks like click is called and executes step.select() … neither have logic to disable the events. Also i dont see a good way with angular.
So you will either have to overwrite one of the material classes or make your own.
the ripple seems fire on buttons that you did not click on?
@roeldeveloper28
this is not the best option, but you can extend theirs and give it a container. I did this here for the snacker
https://stackblitz.com/edit/angular-material-tooltip-in-container-2?file=app%2Fdynamic-overlay-container%2Fdynamic-snack-bar.ts
the only issue is you have to keep it up to date with the latest version.
Hi
can anyone help me to listen scroll event on mat-autocomplete overlay box
Template code
<input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
</mat-form-field>
<mat-autocomplete #NBPageAutocomplete="matAutocomplete" cdkScrollable >
<mat-option *ngFor="let option of suggestedNBPageNames" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>component code
import { ScrollDispatcher } from '@angular/cdk/overlay';
constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
this.scroll.scrolled().subscribe((data: CdkScrollable) => {
console.log(data);
//make an HTTP call when it reaches to the end, to add some more data
});
}
When imported only into main app that imports the feature module, the feature module's components are no longer styled with angular material and instead look like plain unstyled html.
When imported only in the feature module and not the main app, the main app fails to load due to using angular material components in the component templates.
https://demos.creative-tim.com/material-dashboard-pro-angular2/forms/extended
color: #FFFFFF !important; }
Usage:
<app-custom>
<mat-error>custom error</mat-error>
</app-custom>In Custom component:
<mat-form-field>
<input .../>
<ng-content select="mat-error, mat-hint"></ng-content>
</mat-form-field>Is there something I'm missing?
Hey people
I am working on a project where we would like our designers to be able to theme angular-material. Not just the colours, but other aspects that would reflect our brand and unique challenge. Sometimes at a component level, but a lot of the time at a project wide level.
We would also like to be able to customise the Angular Material docs to create a living style guide that also contains our custom components/extensions as well as other information and standards that are used for our specific project.
How do others here approach the situation or suggest approaching it?
mat-error to the custom component in the mat-form-field as you would normally then add your <ng-content select=“[‘mat-error’]”></ng-content>. When consuming your component you would add mat-error as if you were using a mat-form-field
