Skip to content

Instantly share code, notes, and snippets.

View owrrpon's full-sized avatar
💭

Arpan owrrpon

💭
  • Kolkata
View GitHub Profile
@owrrpon
owrrpon / feature-module-a.service.ts
Created June 4, 2021 16:27
storing module state
private module_data: { [key:string]: any } = {};
setModuleData(key: string, value: any){
this.module_data[key] = value;
}
getModuleData(key: string){
return this.module_data[key];
}
@owrrpon
owrrpon / app-utlity.service.ts
Created June 4, 2021 16:18
managing global state in app-utlity.service.ts
private globals: { [key:string]: any } = {
ongoing_request_count: 0,
loading_animation_control: new Subject<any>()
};
setGlobalData(key: string, value: any){
this.globals[key] = value;
}
getGlobalData(key: string){
@owrrpon
owrrpon / _global_styles.scss
Created June 2, 2021 14:54
using bootstrap mixins
.mat-tab-links{
@include media-breakpoint-down(sm) {
justify-content: center;
}
}
@owrrpon
owrrpon / _material_theme.scss
Last active June 3, 2021 21:11
adding custom palette to Angular Material
// 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. Available color palettes: https://material.io/design/color/
$modhyobitto-palette: (
50: #f1f8e9,
100: #dcedc8,
200: #c5e1a5,
300: #aee571,
400: #9ccc65,
500: #8bc34a,
@owrrpon
owrrpon / _material_theme.scss
Created June 2, 2021 07:25
Making application typography over ride Angular Material typography
// Making the application typography over-ride the default Angular Material typography
$modhyobitto-typography: mat.define-typography-config(
$font-family: inherit
);
// 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($modhyobitto-typography);
@owrrpon
owrrpon / _material_theme.scss
Created June 1, 2021 17:48
default custom material theme
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '~@angular/material' as mat;
// 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();
@owrrpon
owrrpon / app-material-importer.module.ts
Created June 1, 2021 17:23
initializing material importer module
import { NgModule } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
const MATERIAL_COMPONENTS = [
MatTabsModule
];
@NgModule({
imports: MATERIAL_COMPONENTS,
@owrrpon
owrrpon / styles.scss
Last active June 1, 2021 16:46
styles.scss after adding material theme
//importing Angular Material theme
@import 'styles/material_theme';
@owrrpon
owrrpon / naming_conventions.md
Created May 31, 2021 13:22
naming conventions
Component Convention
HTML Classes block__element--modifer (Reference : BEM)
HTML IDs lowercase_words_separated_by_underscores
TypeScript cLass attributes lowercase_words_separated_by_underscores
TypeScript class methods camelCase()
Global constants UPPERCASE_WORDS_SEPARATED_BY_UNDERSCORES
Routes lowercase-words/separated-by/hyphens
@owrrpon
owrrpon / styles.scss
Created May 28, 2021 18:18
Including Bootstrap
//importing the good parts from Bootstrap
//Dependencies
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
//Grid
@import "~bootstrap/scss/vendor/rfs";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
//Reboot