;\n````\n\nExample of implementation in the typescript file.\n\n````typescript\nimport {Component} from '@angular/core';\nimport {Table} from \"alexvb1990-design-system\";\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n public amTable: Table[];\n\n constructor() {\n this.amTable = [\n new Table({\n filter: true,\n sorting: true,\n pagination: true,\n dataSource: [\n {id: '1', name: 'John', lastname: 'Doe', age: 31, dob: '09/08/1990'},\n {id: '2', name: 'Lurch', lastname: 'Schpellchek', age: 30, dob: '17/02/1991'}\n ],\n displayedColumns: ['id', 'name', 'lastname', 'age', 'dob'],\n displayedColumnsName: ['id', 'Name', 'Last name', 'Age', 'Date of birth'],\n paginationSizes: [5, 10, 25, 50, 100]\n }), new Table({\n dataSource: [\n {id: '1', name: 'John', lastname: 'Doe', age: 31, dob: '09/08/1990'},\n {id: '2', name: 'Lurch', lastname: 'Schpellchek', age: 30, dob: '17/02/1991'}\n ],\n displayedColumns: ['id', 'name', 'lastname', 'age', 'dob'],\n displayedColumnsName: ['id', 'Name', 'Last name', 'Age', 'Date of birth']\n })\n ];\n }\n}\n````\n\n#### Chips\n\nTo use the chips component of the **Angular Material Framework** you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.\n\n```html\n\n```\n\nTo make things easy we already create a **Model Class** for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.\n\n````typescript\npublic chips: Chip[]\npublic filter: boolean;\n````\n\n````typescript\npublic label: string\npublic color?: string;\n````\n\nExample of implementation in the typescript file.\n\n````typescript\nimport {Component} from '@angular/core';\nimport {Chips} from \"alexvb1990-design-system\";\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n public amChips: Chips[];\n\n constructor() {\n this.amChips = [\n new Chips({\n chips: [\n {label: 'Front-End'},\n {label: 'Back-End'},\n {label: 'UX/UI'}\n ],\n filter: false\n }), new Chips({\n chips: [\n {label: 'Front-End', color: 'primary'},\n {label: 'Back-End', color: 'accent'},\n {label: 'UX/UI', color: 'warn'}\n ],\n filter: true\n }), new Chips({\n chips: [\n {label: 'Front-End'},\n {label: 'Back-End'},\n {label: 'UX/UI'}\n ],\n filter: true\n })\n ];\n }\n}\n````\n\n#### Datepicker\n\nTo use the datepicker component of the **Angular Material Framework** you need to use this HTML tag, in this tag you will pass some attributes that will change their aspect and usage based on the attributes value.\n\n```html\n\n```\n\nTo make things easy we already create a **Model Class** for you. Use this class to give the table their attributes value, some of them attributes are optional so be free to play with them.\n\n````typescript\npublic midweek?: boolean\npublic touchUI: boolean;\n````\n\nExample of implementation in the typescript file.\n\n````typescript\nimport {Component} from '@angular/core';\nimport {Datepicker} from \"alexvb1990-design-system\";\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n public amDatepickers: Datepicker[];\n\n constructor() {\n this.amDatepickers = [\n new Datepicker({\n touchUI: false\n }),\n new Datepicker({\n touchUI: true\n }),\n new Datepicker({\n touchUI: false,\n midweek: true\n })\n ];\n }\n}\n````\n\n## Pipes\n\n### Ordinal number\n\nPipe to transform a regular number into ordinal number (example: 1 to 1st).\n\nExample of implementation in the HTML file.\n\n```html\n{{user.ranking | ordinalNumber}}
\n```\n\n### Truncate Ellipsis\n\nPipe that will add ... to the end of a string if this string it's larger than 50 characters.\n\nExample of implementation in the HTML file.\n\n```html\n{{user.bio | truncateEllipsis:50}}
\n```\n\n## Services\n\n### SwUpdateCheckNewVersionService\n\nThis service will check if there's a new version of the site, to prevent cache or an older version on the client side. When the service detects a new version it will trigger a sweet alert modal to let the user know and if the user wants to upgrade the site it only needs to click on the upgrade option of the modal.\n\nExample of implementation in the typescript file.\n\n````typescript\nimport {Component} from '@angular/core';\nimport {SwUpdateCheckNewVersionService} from \"alexvb1990-design-system\";\n\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: []\n})\nexport class AppComponent {\n constructor(private swUpdateCheckNewVersionService: SwUpdateCheckNewVersionService) {\n this.swUpdateCheckNewVersionService.checkForUpdates();\n }\n}\n````\n\n## Feedback\n\nIf you have any feedback, please reach out to us at sing [alexvb1990@gmail.com](mailto:alexvb1990@gmail.com)\n","readmeFilename":"README.md"}