4 | 
5 | 
6 |
3 |
5 |
6 |
63 |
64 | 
67 |
68 | 
71 |
72 | 
75 |
76 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ng-directives-showcase": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | },
12 | "@schematics/angular:application": {
13 | "strict": true
14 | }
15 | },
16 | "root": "",
17 | "sourceRoot": "src",
18 | "prefix": "app",
19 | "architect": {
20 | "build": {
21 | "builder": "@angular-devkit/build-angular:browser",
22 | "options": {
23 | "outputPath": "dist/ng-directives-showcase",
24 | "index": "src/index.html",
25 | "main": "src/main.ts",
26 | "polyfills": "src/polyfills.ts",
27 | "tsConfig": "tsconfig.app.json",
28 | "inlineStyleLanguage": "scss",
29 | "assets": [
30 | "src/favicon.ico",
31 | "src/assets"
32 | ],
33 | "styles": [
34 | "src/styles.scss"
35 | ],
36 | "scripts": []
37 | },
38 | "configurations": {
39 | "production": {
40 | "budgets": [
41 | {
42 | "type": "initial",
43 | "maximumWarning": "500kb",
44 | "maximumError": "1mb"
45 | },
46 | {
47 | "type": "anyComponentStyle",
48 | "maximumWarning": "2kb",
49 | "maximumError": "4kb"
50 | }
51 | ],
52 | "fileReplacements": [
53 | {
54 | "replace": "src/environments/environment.ts",
55 | "with": "src/environments/environment.prod.ts"
56 | }
57 | ],
58 | "outputHashing": "all"
59 | },
60 | "development": {
61 | "buildOptimizer": false,
62 | "optimization": false,
63 | "vendorChunk": true,
64 | "extractLicenses": false,
65 | "sourceMap": true,
66 | "namedChunks": true
67 | }
68 | },
69 | "defaultConfiguration": "production"
70 | },
71 | "serve": {
72 | "builder": "@angular-devkit/build-angular:dev-server",
73 | "configurations": {
74 | "production": {
75 | "browserTarget": "ng-directives-showcase:build:production"
76 | },
77 | "development": {
78 | "browserTarget": "ng-directives-showcase:build:development"
79 | }
80 | },
81 | "defaultConfiguration": "development"
82 | },
83 | "extract-i18n": {
84 | "builder": "@angular-devkit/build-angular:extract-i18n",
85 | "options": {
86 | "browserTarget": "ng-directives-showcase:build"
87 | }
88 | },
89 | "test": {
90 | "builder": "@angular-devkit/build-angular:karma",
91 | "options": {
92 | "main": "src/test.ts",
93 | "polyfills": "src/polyfills.ts",
94 | "tsConfig": "tsconfig.spec.json",
95 | "karmaConfig": "karma.conf.js",
96 | "inlineStyleLanguage": "scss",
97 | "assets": [
98 | "src/favicon.ico",
99 | "src/assets"
100 | ],
101 | "styles": [
102 | "src/styles.scss"
103 | ],
104 | "scripts": []
105 | }
106 | }
107 | }
108 | }
109 | },
110 | "defaultProject": "ng-directives-showcase"
111 | }
112 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {extends: ['@commitlint/config-conventional']}
2 |
--------------------------------------------------------------------------------
/docs/assets/detail-page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adisreyaj/angular-directives-showcase/fe227adb724569601f8d697ec2c0982841739384/docs/assets/detail-page.jpg
--------------------------------------------------------------------------------
/docs/assets/feature-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adisreyaj/angular-directives-showcase/fe227adb724569601f8d697ec2c0982841739384/docs/assets/feature-image.jpg
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-directives-showcase'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-directives-showcase",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~12.1.2",
14 | "@angular/common": "~12.1.2",
15 | "@angular/compiler": "~12.1.2",
16 | "@angular/core": "~12.1.2",
17 | "@angular/forms": "~12.1.2",
18 | "@angular/platform-browser": "~12.1.2",
19 | "@angular/platform-browser-dynamic": "~12.1.2",
20 | "@angular/router": "~12.1.2",
21 | "@tailwindcss/forms": "^0.3.3",
22 | "@tailwindcss/line-clamp": "^0.2.1",
23 | "ngx-highlight-js": "^12.0.0",
24 | "rxjs": "~6.6.0",
25 | "screenfull": "^5.1.0",
26 | "tslib": "^2.1.0",
27 | "zone.js": "~0.11.4"
28 | },
29 | "devDependencies": {
30 | "@angular-devkit/build-angular": "~12.1.2",
31 | "@angular/cli": "~12.1.2",
32 | "@angular/compiler-cli": "~12.1.2",
33 | "@commitlint/cli": "^12.1.4",
34 | "@commitlint/config-conventional": "^12.1.4",
35 | "@types/jasmine": "~3.6.0",
36 | "@types/node": "^12.11.1",
37 | "husky": "^7.0.1",
38 | "jasmine-core": "~3.7.0",
39 | "karma": "~6.3.0",
40 | "karma-chrome-launcher": "~3.1.0",
41 | "karma-coverage": "~2.0.3",
42 | "karma-jasmine": "~4.0.0",
43 | "karma-jasmine-html-reporter": "^1.5.0",
44 | "tailwindcss": "^2.1.4",
45 | "typescript": "~4.2.3"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { HomeComponent } from './pages/home/home.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | pathMatch: 'full',
9 | component: HomeComponent,
10 | },
11 | {
12 | path: 'fullscreen',
13 | loadChildren: () => import('./pages/fullscreen/fullscreen.module').then((m) => m.FullscreenModule),
14 | },
15 | {
16 | path: 'permissions',
17 | loadChildren: () => import('./pages/permissions/permissions.module').then((m) => m.PermissionsModule),
18 | },
19 | { path: 'stats', loadChildren: () => import('./pages/stats/stats.module').then((m) => m.StatsModule) },
20 | { path: 'highlight', loadChildren: () => import('./pages/highlight/highlight.module').then(m => m.HighlightModule) },
21 | { path: 'long-press', loadChildren: () => import('./pages/long-press/long-press.module').then(m => m.LongPressModule) },
22 | { path: 'badges', loadChildren: () => import('./pages/badges/badges.module').then(m => m.BadgesModule) },
23 | { path: 'table-sort', loadChildren: () => import('./pages/table-sort/table-sort.module').then(m => m.TableSortModule) },
24 | ];
25 |
26 | @NgModule({
27 | imports: [RouterModule.forRoot(routes)],
28 | exports: [RouterModule],
29 | })
30 | export class AppRoutingModule { }
31 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | template: `
6 | {{ title }}
14 |{{ data?.value | currency }}
17 |{{ data?.name }}
18 |{{ data?.delta }}%
20 |Total Sales Report
47 |{{ data?.value | currency }}
46 |{{ data?.name }}
47 |{{ data?.delta }}%
49 || First name | 92 |Last name | 93 |Birthday | 94 |
|---|---|---|
{{user?.firstname}} |
99 | {{user?.lastname}} |
100 | {{user?.birthday}} |
101 |
Total Sales Report
13 |24 | Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a 25 | galley of type and scrambled it to make a type specimen book. 26 |
27 | 28 | Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a 29 | galley of type and scrambled it to make a type specimen book. 30 | 31 | 32 |
30 | Angular Tshirt
32 |Show off that you are an Angular developer.
33 |$25
35 |