Custom selector component

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { OrdersComponent } from './orders/orders.component';
 import { MenuItemsComponent } from './menu-items/menu-items.component';
 import { OffersComponent } from './offers/offers.component';
 import { SchedulesComponent } from './schedules/schedules.component';
+import { CustomSelectorComponent } from './custom-selector/custom-selector.component';
 
 @NgModule({
 	declarations: [
@@ -20,7 +21,8 @@ import { SchedulesComponent } from './schedules/schedules.component';
 		OrdersComponent,
 		MenuItemsComponent,
 		OffersComponent,
-		SchedulesComponent
+		SchedulesComponent,
+		CustomSelectorComponent
 	],
 	imports: [
 		BrowserModule,

src/app/custom-selector/custom-selector.component.html

@@ -0,0 +1,15 @@
+<div class="selector" [ngStyle]="{'width.px' : 200 }">
+	<div class="container">
+		<div class="selected-value">
+			{{ header }}: <span *ngIf="selectedOption"> {{ selectedOption.name }} </span>
+		</div>
+		<button (click)="showDropdown = !showDropdown">
+			<i class="icon" [ngClass]="{'ion-md-arrow-dropdown': !showDropdown, 'ion-md-arrow-dropup': showDropdown}"></i>
+		</button>
+	</div>
+	<ul *ngIf="showDropdown">
+		<li *ngFor="let option of options" (click)="selectedOption = option; showDropdown = false">
+			{{ option.name }}
+		</li>
+	</ul>
+</div>

src/app/custom-selector/custom-selector.component.scss

@@ -0,0 +1,54 @@
+.selector {
+	.container {
+		display: flex;
+		width: 100%;
+		border-radius: 20px;
+		background-color: white;
+		color: var(--brand-blue);
+		align-items: center;
+		justify-content: space-between;
+
+		.selected-value {
+			font-weight: 500;
+			margin-left: 20px;
+			font-size: 14px;
+
+			span {
+				margin-left: 5px;
+			}
+		}
+
+		button {
+			border-radius: 50%;
+			width: 30px;
+			height: 30px;
+			color: var(--brand-blue);
+			font-size: 20px;
+			border: 1px solid var(--brand-blue);
+			background-color: white;
+		}
+	}
+
+	ul {
+		list-style: none;
+		background-color: white;
+		width: 80%;
+		margin: 0 auto;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		overflow: hidden;
+	}
+
+	li {
+		padding: 10px;
+		font-size: 14px;
+		color: var(--brand-blue);
+		cursor: pointer;
+		transition: background-color 0.3s, color 0.3s;
+
+		&:hover {
+			background-color: var(--brand-blue);
+			color: white;
+		}
+	}
+}

src/app/custom-selector/custom-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomSelectorComponent } from './custom-selector.component';
+
+describe('CustomSelectorComponent', () => {
+  let component: CustomSelectorComponent;
+  let fixture: ComponentFixture<CustomSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/custom-selector/custom-selector.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-custom-selector',
+	templateUrl: './custom-selector.component.html',
+	styleUrls: ['./custom-selector.component.scss']
+})
+export class CustomSelectorComponent implements OnInit {
+	@Input() width: number;
+	@Input() options: Array<{
+		name: string,
+		id: string
+	}>;
+	@Input() header: string;
+	@Input() defaultOptionId: string;
+	selectedOption: {
+		name: string,
+		id: string
+	};
+	showDropdown: boolean = false;
+
+	constructor() { }
+
+	ngOnInit() {
+		this.selectedOption = this.options.find(option => option.id === this.defaultOptionId);
+	}
+
+}

src/app/dashboard/dashboard.component.html

@@ -2,6 +2,8 @@
 	<section class="order-stats">
 		<div class="widget-heading-holder">
 			<header> Dashboard </header>
+			<app-custom-selector header="Date" [options]="filterOptions" width="200"
+			[defaultOptionId]="filterOptions[1].id"></app-custom-selector>
 		</div>
 
 		<ul>

src/app/dashboard/dashboard.component.ts

@@ -6,10 +6,21 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+	filterOptions: Array<{
+		name: string,
+		id: string
+	}>
 
 	constructor() { }
 
 	ngOnInit() {
+		this.filterOptions = [{
+			name: 'Yesterday',
+			id: 'yesterday'
+		}, {
+			name: 'Today',
+			id: 'today'
+		}]
 	}
 
 }

src/styles.scss

@@ -42,6 +42,8 @@ button {
 .widget-heading-holder {
 	width: 90%;
 	margin: 30px auto 0;
+	display: flex;
+	justify-content: space-between;
 
 	header {
 		font-size: 20px;