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
``typescript
import { GenericContentModule } from 'angular-generics';

@NgModule({
imports: [
GenericContentModule
]
})
`

##### content-example.html
`html
[gap]="5" [pad]="5" [anchor]="'start'" [flow]="row">




`

##### another-content-example.html
`html
[cols]="'1fr 1fr'" [gap]="'5px 10px'" [flow]="col"
[pad]="'5px 5px 1px 5px'" [anchor]="'center center'">




`

Alert

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

##### app.module.ts
`typescript
import { GenericAlertModule,
GenericAlertService } from 'angular-generics';

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

##### alert-example.html
`html

`

##### alert-example.ts
`typescript
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
`typescript
export class GenericAlert {
message: string;
timeout: number;
}
`

Modal

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

| Input | Type | Default Value |
|:--------|:-------------------|---------------|
| footer | TemplateRef\ | |
| header | TemplateRef\ | |
| title | string | |

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

##### app.module.ts
`typescript
import { GenericModalModule } from 'angular-generics';

@NgModule({
imports: [
GenericModalModule
]
})
`

##### modal-example.html
`html
Open Modal






`

##### modal-example.ts
`typescript
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
`typescript
import { GenericButtonModule } from 'angular-generics';

@NgModule({
imports: [
GenericButtonModule
]
})
`

##### button-example.html
`html
Example
`

##### button-example.ts
`typescript
import { Component } from '@angular/core';

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

constructor() { }

buttonClicked(){
// example button clicked
}
}
``

more documentation soon