CodeSnippets

I created this project to track code snippets I wrote for demo purposes while answering stack overflow questions.

• accordion manually coded using ngIf
• add a row after every third row - Collected
• cascading multiselect
• css allow only five checkbox in a row
• css line break after every two items for 100 items
• innerHTML add template code via component
• select-option move scrollbar using keyup and keydown
• jqeury fade intial loading... page
• resize window to remove empty gray area in IE Chrome
• setTimeout active button after 2 seconds of page load

---

Angular 2 Data Binding:

• canDeactivate setup
• checkbox add remove from array on select deselect share array via service
• checkbox select deselect all on click one checkbox share array via service
• data access bind to json object property name with dash (-)
• delete object from array by id
• ngFor track if previous object matches current object
• ngForm add and delete row from a table
• radio selection binded to object value in reactive form
• select option filter data based on option selected
• select option return object based on selection
• scroll using keyup keydown and select on pressing enter for select option
• Track hiding divs, show last hidden div when back button clicked

---

Angular 2 Data Share:

• @Output Emitting value from one component to another
• component interaction passing data via Input
• display five forms data in a summary page via shared service
• global variable - set/get via shared services
• parent-child data share via binding and service
• parent-child data share via Promise
• Rxjs BehaviorSubject and Observable to share data with child component
• Rxjs Subject and Observable to share data with child component
• Shared service between components

---

Angular 2 Flex-layout:

• flex-layout detech screen size change
• flex-layout make side by side div equal height
• flex-layout set div width to 90% with 5% margin for xs
• flex-layout set div width to 90% for xs
• flex-layout template example with material2

---

Angular 2 HTTP Service:

• http service accessing JSON data in template
• http service retrieve data from API
• http service show header information

---

Angular 2 Input Validation:

• checkbox make click unresponsive
• Custom Directive to allow letters A-Z only
• Custom Directive to only allow negative only at index 0 for number
• input field allowing numbers and - only
• input validation with ng-valid ng-pristine to show error only when typing for minlength 8
• select option with confirmation revert to previous value on discard

---

Angular Material 2

• material full template with flex-layout example
• material template for beginner using md-sidenav md-tabs md-toolbar and footer
• material template make only body div scrollable
• material template extended for demo includes datepicker autocomplete
• material beta.1 angular 2.4 customize radio button color
• material beta.1 angular 2.4 form setup
• material beta.2 angular 2.4 customize radio button color

---

md-autocomplete

• md-autocomplete bootstrap styled input field
• md-autocomplete change option panel width
• md-autocomplete get open or close state of options panel using showPanel
• md-autocomplete inside reactive form
• md-autocomplete make api call the retrieve dropdown data on click inside input field
• md-autocomplete reduce each option row height
• md-autocomplete separate control and display
• md-autocomplete separate control and display 2
• md-autocomplete set searchable data from API
• md-autocomplete set searchable data from API Example 2
• md-autocomplete using same instance for multiple forms
• md-autocomplete using simple filter - Collected

---

md-button

• md-button add color to md-icon-button
• md-button-toggle default selected button
• md-button with md-snackbar using ngx-translate

---

md-card

• md-card center horizontally and vertically in a page
• md-card highlight each on select deselect
• md-card hover animation
• md-card show grouped items in separate cards

---

md-checkbox

• md-checkbox apply ngClass on select
• md-checkbox track select and deselect
• md-checkbox with indentation and live search
• md-checkbox disable checkboxes for 3s after click

---

md-chip

• md-chip with close icon
• md-chip with md-input

---

md-datepicker

• md-datepicker binding date value
• md-datepicker change toggle button icon
• md-datepicker change position of picker dialog box
• md-datepicker custom NativeDateAdapter for custom date format
• md-datepicker open dialon on focus or select by using reference - disable keyborad input
• md-datepicker passing selected date to function using $event
• md-datepicker position to right side using flex layout
• md-datepicker set locale
• md-datepicker set locale to 'fr' parse date format dd/mm/yyyy with custom NativeDateAdapter
• md-datepicker set locale to 'it' parse date format dd/mm/yyyy with custom NativeDateAdapter

---

md-dialog

• md-daialog example from material2 demo app
• md-dialog passing data to dialog from component
• md-dialog passing data to component unconventional way - Collected

---

md-expansion

• md-expansion data binding for expanded and store state in localstorage

---

md-grid-list

• md-grid-list flex-layout change column number based on viewport size
• md-grid-list flex-layout change column number based on div size changes
• md-grid-tile change content alignment css
• md-grid-list change content format of first column grid-tiles

---

md-input

• md-input adding/removing .00 for whole numbers
• md-input allow negative only at index 0 for numbers
• md-input custom placeholder that hides on focus
• md-input hide divider using css
• md-input hide divider using directive
• md-input override class with ViewEncapsulation and :host
• md-input position md-icon to the left
• md-input required error validation marker
• md-input set ngClass based on input length
• md-input set ngClass based on input length - Collected
• md-input set divider color
• md-input show input on button click
• md-input using ngModelChange

---

md-list

• md-list format form with flex-layout center aligned

---

md-menu

• md-menu customize prebuild theme css
• md-menu close menu from component using MdMenuTrigger class
• md-menu close menu from component using template reference
• md-menu input validation
• md-menu move panel to the right
• md-menu show image in option list and for selected option
• md-menu stop click event propagation for menu item md-input-container
• md-menu trigger menu open via code
• md-menu using class property to change background color of menu

---

md-paginator

• md-paginator get prev or next click event using (page) output property
• md-paginator increase index by 1 before sending to API

---

md-progressbar

• md-progressbar value binding

---

md-radio

• md-radio change radio button color
• md-radio controls view of md-select

---

md-select

• md-select filter data based on selection show on button click
• md-select multiselect
• md-select md-radio revalidate form on option change
• md-select no underline
• md-select remove down caret after selection
• md-select reset form to invalid on selection change
• md-select set default value
• md-select set default value SO example

---

md-sidenav

• md-sidenav change backdrop color
• md-sidenav remove backdrop using css and ::ng-deep
• md-sidenav remove backdrop with css property diplay: none
• md-sidenav close sidenav of item clicked in sidenav
• md-sidenav close sidenav using router events obserable
• md-sidenav drawer like bar icon only by default - full width on toggle
• md-sidenav get backdropClick event
• md-sidenav pass sidenav reference to a another component to control toggle
• md-sidenav show and hide based on screen size using window:resize
• md-sidenav show and hide using flex-layout media observable
• md-sidenav staic md-toolbar on top
• md-sidenav md-toggle show and hide based on screen size
• md-sidenav work with md-menu

---

md-slider

• md-slider change detection with (input)
• md-slider pass new value to component

---

md-slider-toggle

• md-slider-toggle change after user confirmation
• md-slider-toggle change default color of toggle
• md-slide-toggle track toggle click and perform action on change

---

md-snackbar

• md-snackbar custom configuration example
• md-snackbar working example

---

md-table

• md-table add left border on selected row
• md-table get row index odd even and last flag
• md-table highlight whole selected row
• md-table pass data from obserable return
• md-table pass data from obserable return SO example
• md-table pass data from promise return
• md-table pass data from API Stackoverflow doc example
• md-table show each row like md-card using css
• md-table with Observable API data display on seach only

---

md-tabs

• md-tabs child tabs nested within parent tab - Collected
• md-tabs change tabs using button from the body content
• md-tabs disable click on tab and move tabs via buttons - Collected
• md-tabs hide tab header buttons using css
• md-tabs reducing width of tabs
• md-tabs hide when array length < 1
• md-tabs scrollable tab-content area with fixed tab label
• md-tabs set default tab using selectedIndex
• md-tabs using full width veritcal align text icons

---

md-tooltip

• md-tooltip always show tooltip
• md-tooltip custom class using MdTooltipClass
• md-tooltip disable tooltip for xs screen size using flex-layout
• md-tooltip fit multiple lines withing
• md-tooltip set mdTooltipShowDelay globally using shared service

---

Others

• media change and play video by clicking images
• multiselect data binding
• ngClass toggle fontawesome icon in selected row
• passing template value to component using #value

---

RegExp

• reg exp allow only 7 alphabets
• reg exp validate number for 3 digit and 3 decimal

---

Material 1 md-slide-toggle

• mdButton remove hover animation color
• Pull slider to the right of text for relase before 1.1.12

---

PrimeNG

• primeng blank template
• pButton with font-awesome
• p-calenar formControl validation for user input date
• p-calendar date range from control validation
• p-calendar with reactive form
• p-checkbox
• p-multiSelect example
• p-multiselect use object as value

** Collected snippet are provided by Stack Overflow Users