Angular Generics

!!! Work In Progress !!!

Content

| Selector | Output | |:-----------:|:----------:| | agc | - |

| Input | Type | Default Value | |:--------|:-----------------|:-------------:| | height | string | number | 'inherit' | | width | string | number | 'inherit' | | gap | string | number | | | pad | string | number | | | anchor | string | 'start' | | flow | string | 'row' | | rows | string | number | 'auto' | | cols | string | number | 'auto' |

app.module.ts

import { GenericContentModule } from 'angular-generics';

@NgModule({
  imports: [
    GenericContentModule
  ]
})

content-example.html

  <agc [height]="200" [width]="'100%'" [rows]="1" [cols]="4"
              [gap]="5" [pad]="5" [anchor]="'start'" [flow]="row">

              <!-- content -->

  </agc>

another-content-example.html

  <agc [height]="'1.8em'" [width]="25" [rows]="'1fr'"
              [cols]="'1fr 1fr'" [gap]="'5px 10px'" [flow]="col"
              [pad]="'5px 5px 1px 5px'" [anchor]="'center center'">

              <!-- content -->

  </agc>

Alert

| Selector | Input | Output | Service | |:---------|:------:|:-------:|:--------------------| | ag-alert | - | - | GenericAlertService |

app.module.ts

import { GenericAlertModule,
         GenericAlertService } from 'angular-generics';

@NgModule({
  imports: [
    GenericAlertModule
  ],
  providers: [
    GenericAlertService,
  ]
})

alert-example.html

  <ag-alert></ag-alert>

alert-example.ts

import { Component } from '@angular/core';
import { GenericAlertService, GenericAlert } from 'angular-generics';

@Component({
  templateUrl: './alert-example.html',
})
export class AlertExampleComponent {

  constructor(private alertService: GenericAlertService) { }

  showAlert() {
    let alert = new GenericAlert();
    alert.message = "You have an alert!";
    alert.timeout = 2000; // optional

    this.alertService.addAlert(alert);
  }
}

GenericAlert

export class GenericAlert {
  message: string;
  timeout: number;
}

Modal

| Selector | |:---------| | ag-modal |

| Input | Type | Default Value | |:--------|:-------------------|---------------| | footer | TemplateRef<any> | | | header | TemplateRef<any> | | | title | string | |

| Output | Type | |:---------|:--------------------:| | closed | - |

app.module.ts

import { GenericModalModule } from 'angular-generics';

@NgModule({
  imports: [
    GenericModalModule
  ]
})

modal-example.html

  <button (click)="exampleModal.open()">Open Modal</button>

  <ag-modal #exampleModal [title]="'Example Modal'">

    <!-- content -->

  </ag-modal>

modal-example.ts

import { Component } from '@angular/core';

@Component({
  templateUrl: './modal-example.html',
})
export class ModalExampleComponent {

  constructor() { }

}

Button

| Selector | |:-----------------------| | ag-button |

| Input | Type | Default Value | |:------------|:-------------------|---------------| | width | string | number | 'inherit' | | height | string | number | 'inherit' | | fontSize | string | number | 'inherit' | | disabled | boolean | false |

| Output | Type | |:------------|:--------------------:| | click | - |

app.module.ts

import { GenericButtonModule } from 'angular-generics';

@NgModule({
  imports: [
    GenericButtonModule
  ]
})

button-example.html

<ag-button (click)="buttonClicked()">Example</ag-button>

button-example.ts

import { Component } from '@angular/core';

@Component({
  templateUrl: './button-example.html',
})
export class ButtonExampleComponent {

  constructor() { }

  buttonClicked(){
    // example button clicked
  }
}

more documentation soon