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 Google Maps:

• Display Google Street View Image In Angular Webapp

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