diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts index 869d97b94d..2342a89ff5 100644 --- a/packages/demos/angular/src/app/app-routing.module.ts +++ b/packages/demos/angular/src/app/app-routing.module.ts @@ -16,6 +16,7 @@ const routes: Routes = [ { path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' }, { path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' }, { path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' }, + { path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' }, { path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' }, ]; diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html index 7c00a7db82..b2232e6617 100644 --- a/packages/demos/angular/src/app/home-page/home-page.component.html +++ b/packages/demos/angular/src/app/home-page/home-page.component.html @@ -37,6 +37,9 @@
  • Popover Page
    • +
  • + Segment Page +
  • Virtual Scroll Page
    • diff --git a/packages/demos/angular/src/app/segment/segment-page.component.ts b/packages/demos/angular/src/app/segment/segment-page.component.ts new file mode 100644 index 0000000000..21496c45e1 --- /dev/null +++ b/packages/demos/angular/src/app/segment/segment-page.component.ts @@ -0,0 +1,132 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-segment-page', + template: ` + + + + + + + Friends + + + Enemies + + + + + + + + + + + + + + + + + + + + +

    Model style: NgModel

    + + + Model A + + + Model B + + + Model C + + + Model D + + +

    Model Style: Model {{ modelStyle }}

    + + + + + + + + + Toggle Button Disabled + Toggle Segment Disabled +     + + + + + + Primary + + + Toolbar + + + Light Segment + + + + + + + Default + + + Toolbar + + + Danger Segment + + + + + + + Default + + + Toolbar + + + Dark Segment + + + + +     +     + ` +}) +export class SegmentPageComponent { + relationship: string = 'friends'; + modelStyle: string = 'B'; + appType: string = 'free'; + icons: string = 'camera'; + isDisabledB: boolean = true; + isDisabledS: boolean = false; + + toggleBDisabled() { + this.isDisabledB = !this.isDisabledB; + } + + toggleSDisabled() { + this.isDisabledS = !this.isDisabledS; + } + + onSegmentChanged(segmentButton: any) { + console.log('Segment changed to', segmentButton.currentTarget.value); + } + + onSegmentSelected(segmentButton: any) { + console.log('Segment selected', segmentButton.currentTarget.value); + } +} diff --git a/packages/demos/angular/src/app/segment/segment-routing.module.ts b/packages/demos/angular/src/app/segment/segment-routing.module.ts new file mode 100644 index 0000000000..c6fbc36f39 --- /dev/null +++ b/packages/demos/angular/src/app/segment/segment-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { SegmentPageComponent } from './segment-page.component'; + +const routes: Routes = [ + { path: '', component: SegmentPageComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SegmentRoutingModule { } diff --git a/packages/demos/angular/src/app/segment/segment.module.ts b/packages/demos/angular/src/app/segment/segment.module.ts new file mode 100644 index 0000000000..05a48a9a73 --- /dev/null +++ b/packages/demos/angular/src/app/segment/segment.module.ts @@ -0,0 +1,15 @@ +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SegmentPageComponent } from './segment-page.component'; +import { SegmentRoutingModule } from './segment-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + SegmentRoutingModule + ], + declarations: [SegmentPageComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class SegmentModule { }