Skip to content

Instantly share code, notes, and snippets.

View Splaktar's full-sized avatar

Michael Prentice Splaktar

View GitHub Profile
@Splaktar
Splaktar / styles.scss
Created October 4, 2017 20:47
Angular Material Theming Guide Example
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
// import global themes
@import '~@angular/material/theming';
@import './ng-io-theme';
// import global variables
@import './constants';
// import global mixins
@import './mixins';
/* You can add global styles to this file, and also import other style files */
@import './styles/ng-io-theme';
@import './styles/main.scss';
@Splaktar
Splaktar / _theme.scss
Created October 4, 2017 21:26
Theme configuration example
@import '~@angular/material/theming';
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker hue.
$app-primary: mat-palette($mat-teal, 700, 100, 900);
$app-accent: mat-palette($mat-orange);
// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);
@Splaktar
Splaktar / styles.scss
Created October 4, 2017 21:29
This file can only be included in your app once!
@import './styles/theme';
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component that you are using.
@include angular-material-theme($app-theme);
@Splaktar
Splaktar / some.component.scss
Created October 4, 2017 21:53
Example of using Angular Material themes in custom components
@import '../../styles/theme';
.noRecordsContainer {
padding: 48px;
background-color: mat-color($app-accent, 50);
width: 100%;
}
.errorMessageContainer {
padding: 48px;
@Splaktar
Splaktar / unsaved-changes-guard.ts
Last active March 13, 2023 18:23
Guard against navigating away when there are unsaved changes
import {CanDeactivate, Router} from '@angular/router';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Splaktar
Splaktar / CHANGELOG.md
Last active April 27, 2018 21:35
AngularJS Material 1.1.9 CHANGELOG
@Splaktar
Splaktar / CHANGELOG.md
Last active June 28, 2018 06:34
AngularJS Material 1.1.10 CHANGELOG