angular-generics v0.7.6

Angular Generics

!!! Work In Progress !!!

Content

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

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

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

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