Custom Bottom Sheet Component For Angular

An easy implementation of the bottom sheet on your AngularJS web applications. Features: Light and dark theme Custom trigger button Custom font/background colors How to use it: 1. Install and import the Bottom Sheet Component in your Angular project. # NPM $ npm install angular-bottom-sheet –save import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { AngularBottomSheetModule } from ‘angular-bottom-sheet’; import { AppComponent } from ‘./app.component’; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { } 2. Add the Bottom Sheet together with a toggle button

Minimal File Select & Upload Component For Angular Material – mat-file-upload

A pretty clean and fully configurable file picker & uploader component built with Angular, Angular Material, and Material Icons. How to use it: 1. Install & download. # NPM $ npm install mat-file-upload –save @NgModule({ declarations: , imports: , providers: , bootstrap: , }) export class AppModule {} 2. Add the component to your template. <mat-file-upload OPTIONS HERE > </mat-file-upload> 3. Available options with default values. labelText: label text selectButtonText: text of select button uploadButtonText: text of upload button allowMultipleFiles: allows multi-file upload showUploadButton: whether or not to show the upload button customSvgIcon: custom SVG icon

Custom Date Range Picker For Angular 8+ – ngx-daterange

A minimal clean and highly customizable date range picker for Angular 8+. Based on the Moment.js library to manipulate dates & times. See Also: 10 Best Date Picker Libraries For Angular.js App How to use it: 1. Install and import the ngx-daterange module. # NPM $ npm install ngx-daterange –save import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; import { NgxDateRangeModule } from ‘ngx-daterange’; 2. Use the component in your app. <date-range-picker =”options” =”form” =”‘myDateRange'”> </date-range-picker> @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { } 3. All possible