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
- 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
- @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
- 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
- http service accessing JSON data in template
- http service retrieve data from API
- http service show header information
- 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
- 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 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 add color to md-icon-button
- md-button-toggle default selected button
- md-button with md-snackbar using ngx-translate
- 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 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-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-daialog example from material2 demo app
- md-dialog passing data to dialog from component
- md-dialog passing data to component unconventional way - Collected
- 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 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-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 get prev or next click event using (page) output property
- md-paginator increase index by 1 before sending to API
- 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 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-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-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 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 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
- 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
- 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